I have a big div wit a lot of smaller divs within it. Say,
<div id="parent">
<div id="child1">
</div>
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child1">
</div>
<div id="child1">
</div>
</div>
If I'm currently at the last 'child1', how dow I get to the top most child1 with prev()? For me it breaks when it reaches 'child2'.
First of all your HTML markup is invalid. There shouldn't be more that one element with the same ID in a document.
Read Element identifiers: the id and class attributes
id:
This attribute assigns a name to an
element. This name must be unique in a
document.
class:
This attribute assigns a class name or
set of class names to an element. Any
number of elements may be assigned the
same class name or names. Multiple
class names must be separated by white
space characters.
You can use the parent and :firstchild to get the first element inside your current parent element.
You can use something like this if you are currently at any child of element 'parent'
$(this).parent().find("div:first-child");
I think you want this:
$(this).prevAll('.child1').eq(0);
$(this).closest('.parent').find('.child1:first')
I changed to classes, because you really should only ever have one element of any given ID in a page
Related
I want to execute JavaScript that finds all elements on a page that contains some text in it's class name and change the class names.
For example, let's say I have the following elements:
<div class="blue selector">...</div>
<div class="green selector">...</div>
<div class="red selector">...</div>
<div class="button">...</div>
Let's say I want to find all the elements that contain the word "selector" in their class names and change the class names of that element to "picker", so that I finally have:
<div class="picker">...</div>
<div class="picker">...</div>
<div class="picker">...</div>
<div class="button">...</div>
What JavaScript can I execute on the page to get this result?
You can use Substring matching attribute selectors and change the class name of elements.
document.querySelectorAll('div[class*="selector"]').forEach(node=> node.className = "picker");
I'm trying to get the div element that's nested deep within another div, but can't get the CSS Selector string to work.
The div I want does not have a unique identifier, but resides deep within another div that has. I've gotten that top level div, but have no clue how to get the nested one.
DOM:
var obj = document.body.querySelector('.qvobject[data-qlikobjectid="XFvnjF"]');
console.log(obj);
var cont = obj.querySelector('.kpi-value');
console.log(cont);
<div class="qvobject" data-qlikobjectid="XFvnjF">
<div>
<div>
<div class="kpi-value">I WANT THIS</div>
</div>
</div>
</div>
The result is that "obj" is the right object, but "cont" is null, so it can't find it.
You can select it using the child selector. Just put a space between the parent selector and the child selector.
This makes the traverser go further to any level in the dom to select the desired element.
var element = document.querySelector('.qvobject[data-qlikobjectid="XFvnjF"] .kpi-value');
console.log(element);
<div class="qvobject" data-qlikobjectid="XFvnjF">
<div>
<div>
<div class="kpi-value">I WANT THIS</div>
</div>
</div>
</div>
I have this:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-6">
</div>
<div class="col-md-8">
</div>
<div class="col-md-12">
</div>
<div class="A">
</div>
<div class="B">
</div>
</div>
I want to select children of row class whose classes are col-md-4,6,8,12. Is there any good way to select all at once?
There can be multiple row divs and I am going to use wrapAll to wrap every row div's children in some other div. So if I use wrapAll, it just shifts all content of other row divs to the first row div. If I put the selector query inside loop, it just keeps wrapping the children times the number of row divs. I don't want to let this happen.
Are you understanding guys?
if You have other child elements with col-md-* and you do not want to target them. Then can use descendant child selector or .find():
$('.row .col-md-4,.row .col-md-6 ')
or
$('.row').find('.col-md-4,.col-md-6,.col-md-8,.col-md-12')
Otherwise you can use attribute contains selector:
$('.row [class*="col-md-"]')
Yeah you can use native 'querySelectorAll' function.
Like that :
document.querySelectorAll('.row [class*="col-md"]')
[class*="col-md"] means "All classes containing 'col-md"
A non-javascript solution
Try selecting them with the ^ or with the * selector. For example like:
[class^="col-md-"] {}
That will select elements with a class that starts with col-md-, thus, making the number at the end irrelevant.
or
[class*="col-md-"] {}
That will select elements with a class that contain col-md-.
Here's what the MDN says:
[attr^=value]
Represents an element with an attribute name of attr the
value of which is prefixed by "value".
[attr*=value]
Represents an element with an attribute name of attr the value of which contains at least one occurrence of string "value" as substring.
Demo:
.row [class^="col-md-"] {
color: red;
}
<div class="row">
<div class="col-md-4">
foo bar
</div>
<div class="col-md-6">
foo bar
</div>
<div class="col-md-8">
foo bar
</div>
<div class="col-md-12">
foo bar
</div>
<div class="A">
foo bar
</div>
<div class="B">
foo bar
</div>
</div>
$('.row>[class|="col-md"]')
.row is a class selector
> is a children selector
[] is a attribute selector
|= means prefix is
The code means that select the children of those with class "row", whose value of attribute class have a prefix "col-md".
Note1: according to the recommended rules, the value part of the attribute select (no matter it is a equals relation, prefix equals or other kinds of equals), the part after =, should be a string. Since the select has already been a string in '', you need to use "" to describe a string.
But if you use "" make the selector string, inside you need to use '' as a string.
Note 2: I just tried |="col-md-" but it does not work.
I want manipulate a certain class, selecting a ID like a parent, this way a want manipulate the class without define a ID in each class. In this example I want manipulate the class 3, but only the class inside on the div with ID b.
<div id="a">
<div class="1">
<div class="2">
<div class="3">
<div class="4">
</div>
<div id="b">
<div class="1">
<div class="2">
<div class="3"> // This tag is the selected to change
<div class="4">
</div>
<div id="c">
<div class="1">
<div class="2">
<div class="3">
<div class="4">
</div>
do
$("#b .3")
or if you wanna specifically get direct child of the parent
$("#b > .3")
Something like this should do the job:
var a = document.getElementById('b');
var b = a.getElementsByClassName('3');
alert (b[0].className)
SIDENOTE:
Why does it make sense to use javascript over jQuery?
CODE ops / sec
document.getElementById('b'); 12,137,211
$('#b'); 350,557
Vanilla JS is way faster...
You can enumerate selectors from the oldest parent to the deepest child, for your case:
$("#b .3)
Or easier to understand version:
$("#b).find(".3")
It first select elements with id b, then, from its children, it selects elements with class 3
If you have the ID in jQuery you should be able to just use $('#' + myId + ' .3') to select the desired element dynamically. In the given example myId would of course be 'b'. If its always the same element you want to access and all you need is the corresponding selector, then of course the static $('#b .3') or $('#b > .3') for a direct parent-child relationship suffice.
<div class='1'>
<div class='2'>
<div class='3'>
</div>
</div>
</div>
query('.1').children() // returns [<div class='2'></div>]
Is is possible to access 3rd level children by using query().children() instead of using something like query('.1 .2 .3')?
Basically, I would like to access all children of the current element without hard-coding its Id, e.g. query('#foo .3')
You could use:
element.querySelectorAll('div') to get all <div> children of element
element.querySelectorAll('[class]') to get all children of element that does have a class attribute
document.querySelectorAll('div[class]') for the whole html document
You can use any CSS selector as a parameter for querySelectorAll().