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')
Related
How to get nested DOM.
I want to get the nested DOM by Jquery.
For example.
<div id="red">
<div id="member">A</div>
</div>
<div id="blue">
<div id="member">B</div>
</div>
<div id="yellow">
<div id="member">C</div>
</div>
Is it possible to get the each memver id like, yellow.member
I want to do like this.
$("#yellow.member").removeClass("myclass");
The way you wanted to access the child element of #yellow was real close to be correct.
$("#yellow .member").removeClass("myclass");
Notice the added space. The space means to look for another matching element in the descendant tree of the element matched by the previous selector.
Now it's your markup that is wrong. You just cannot use the same id more than once. The concept of id comes from long before the computer age... An "identification" is unique per definition!
Here is how your markup should look like... in a working example where the interval is just for fun:
$(document).ready(function(){
setInterval(function(){
$("#yellow .member").toggleClass("myclass");
},1000);
});
.myclass{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
<div class="member">A</div>
</div>
<div id="blue">
<div class="member">B</div>
</div>
<div id="yellow">
<div class="member">C</div>
</div>
You can use nested selectors with jQuery:
$('#yellow #member').removeClass('myclass');
Removes .myclass from the #member element inside #yellow.
Also, your HTML isn't valid. You can use an ID only once per document, so change all <div id="member"> ... </div> to <div class="member"> ... </div>. Then the selector passed to jQuery changes to
$('#yellow .member')
What you're after is the .find() method.
$("#yellow").find('#member').removeClass("myclass");
Or children()
$("#yellow").children('#member').removeClass("myclass");
or
$('#yellow>#member'),removeClass("myClass");
EDIT: Also don't have duplicate id's. Use class attribute instead.
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>
My HTML code structure like this
<div id="content">
<div> //start
<div id="title"></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div> //end
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
.....more div like above....
</div>
I want to use a piece of JQuery code to hide everything except the "div" has id="title"(keep the code from //start to //end).
Now, my JQuery code is:
$("div:not(:has(#title))").hide();
It shows "div id="title"""div"", but it also hide the several "div" after "div id="title"""div"". Again, I want to keep the code from //start to //end. Please help me, thanks.
If your goal is to hide the siblings of the div that contains the #title element, then:
$("#title").parent().siblings().hide();
$("#title") - find the element with the id "title"
.parent() - go up to its parent
.siblings() - get the siblings of the parent
.hide() - hide them
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
To select the specific <div> (for e.g the <div> commented as <!-- This one!)Please note all of <..> elements are unknown elements at all levels, BUT NO <div>'s.
<div></div>
<div class="class1">
<..>
<..></..>
<div></div>
<div></div>
<div> <!-- 3rd-child div, of its parent -->
<..></..>
<..>
<div></div>
<div></div> <!-- This one! The 2nd-child div, of its parent -->
<div></div>
</..>
</div>
<div></div>
</..>
</div>
In this scenario, the only logic i can think is:
ONLY the element type as <div>s and the nth numbers (among siblings) are KNOWN.
Middle elements are unknowns. Can be <p> or <table> or <ul> whatever, but not <div>s again.
Levels are unknown.
So:
The target <div> is recursively located under the div#class1
It is the 2nd <div> inside the 3rd <div> of div#class1
How can i get it?
Sorry everyone, i have my own answer already:
$("div.class1 div:eq(2) div:eq(1)").html()