Given this HTML:
<div class="foo">
select this
<div class="foo">don't select this</div>
</div>
<div class="foo">
select this
</div>
What would be the selector to grab just the divs on the first level, not the nested one?
So the query $('.foo WHATEVER').length should return 2.
See the jsfiddle here.
You can use > child selector:
$('body > .foo').length;
http://jsfiddle.net/pSBxv/
Maybe something like this? Where foo is not a descendant?
$('.foo').not('.foo .foo').length
http://jsfiddle.net/DmDBV/
You could use body as a parent element and select children of it using the Child Selector
$('body > .foo').length
Demo
Related
I looked at jQuery selector for an element that directly contains text?, but the suggested solutions were all quite involved.
I tried to select the second div, which contains some text as below.
<div>
<div>
mytext
</div>
</div>
The jQuery command:
$('div:contains("mytext")').css("color", "red)
Unfortunately this also selects (makes red) all the parent divs of the div that I would like to select. This is because :contains looks for a match within the selected element and also its descendants.
Is there an analogous command, which will not look for a match in the descendants? I would not like to select all the parent divs, just the div that contains the text directly.
Well the probem is that $('div:contains("mytext")') will match all divs that contains myText text or that their child nodes contains it.
You can either identify those divs with id or a class so your selector will be specific for this case:
$('div.special:contains("mytext")').css("color", "red");
Demo:
$('div.special:contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="special">
mytext
</div>
</div>
Or, in your specific case, use a resitriction in your selector to avoid the divs that has child nodes with :not(:has(>div)):
$('div:not(:has(>div)):contains("mytext")').css("color", "red");
Demo:
$('div:not(:has(>div)):contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
mytext
</div>
</div>
You can find the target div with find() method in jQuery.
Example:
$('div').find(':contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
mytext
</div>
</div>
Edit:
Following example with filter() in jQuery.
$('div').filter(function(i) {
return this.innerHTML.trim() == "mytext";
}).css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
test2
<div>
test
<div>
mytext
</div>
</div>
</div>
I made a div, in a div, in a div and I am trying to access the attribute food of the extern div through the most intern div. How can I do that?
I commented in the code, I'm trying to alert 'banana'.
//alert($('.animals').attr('food')); //alerts banana
//alert($('.mammals').parent().attr('food')); //alerts banana
//alert($('.monkeys').parent().parent().attr('food')); //doesn't alert banana
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animals" food="banana">
<div class="mammals">
<div class="monkeys">
</div>
</div>
</div>
You can use closest() to get to specific parent element of a child element
:
alert($('.mammals').closest(".animals").attr('food'));
alert($('.monkeys').closest(".animals").attr('food')
See closest() in Jquery DOCS here
You can use parents for multiple levels:
$('.monkeys').parents('.animals').attr('food')
Use closest
alert($('.monkeys').closest(".animals").attr("food"))
You can use closet() or parentsUntil(). With parentsUntil, you can even select multiple parents
alert($('.monkeys').parentsUntil(".animals").attr("food"))
Below is the code I am working with, as you can see, there is an id named "parent" and an id named "grandchilden". My goal is to get the content inside of this div "grandchildren". How can I achieve it?
I've tried $(this).closest('.grandchildren'), but didnt work.
<div id="parent">
<a href="#">
<div>
<p id="grandchildren">
This is a content
</p>
</div>
</a>
</div>
If you have a ID on that div you can use $('#grandchildren').html()
If you don't have a ID for it, what is the pattern? div > a > div > p ? In that case you can use this:
$('div#parent > a > div > p').html();
Demo here
Please notice the difference between .text() and .html(), if you just need to get text use .text() instead of .html()
If you have a reference like this you could use find which searches downwards, with the selected element as starting point:
$(this).find('.someClass')
$('#parent').find('#grandchildren').text();
I have a group of nested divs
<div id="myDivs">
<div>
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
</div>
Using jquery, how do I select the div that is immediately beneathe myDivs, but NONE of it's children?
thnx!
Use the child selector: $('#myDivs > div')
Since the first element is an id selector, the following way will faster. But only noticed the difference in a very complex document.
$('#myDivs').find('div')
My divs are nested like this.
<div id="top">
<div class="child1">
<div class="child-child">
<div class="child-child-child">
</div>
</div>
</div>
<div class="child2">
<div class="child-child">
<div class="child-child-child">
</div>
</div>
</div>
</div>
Right now I'm going from #top to .child-child-child by doing this.
$('#top').children('.child1')
.children('.child-child')
.children('.child-child-child');
Do I have to specify the full path like this? I want to omit the middle divs if there's a syntax that would let me do that. But I probably still need to specify whether I want to go through .child1 or .child2.
You do need to specify which path to take, but you could make it a little shorter:
$('#top > .child1').find('.child-child-child');
This will give you the '.child-child-child' that is a descendant of .child1.
Or you could write it like this, using only selectors:
$('#top > .child1 .child-child-child');
Or this, using only traversal methods:
$('#top').children('child1').find('.child-child-child');
You can just use a descendant selector (a space) to find the child anywhere beneath (as .find() does), like this:
$('#top .child-child-child');
Or, a bit more specific:
$('#top > .child1 .child-child-child');
To simplify this, you can use the selector:
$('#top .child1 .child-child-child');
This selector says "an element with a class of .child-child-child that is inside an element with a class of .child1 that's inside an element with an id of top".