- Whenever you select an element with jQuery, a collection of nodes is returned (even if it's just one). Simply checking the length property will tell you if one element contains another, even how many matches were found! For reference, here's the HTML fragment used in this tutorial:
<div id="lnk">
<a href="index.html" id="homeLnk">Home</a>
<br><a href="about.html" id="aboutLnk">About Us</a>
<br><a href="contact.html" id="contactLnk">Contact Us</a>
</div> - Let's first check how many links (HTML "<a>" elements) our <div> has as children:
alert( $("#lnk").children("a").length ); // 3Caveat: it's important to specify a selector argument for the children() function, otherwise all child nodes are counted; the code below returns "5" - guess why (show answer) .
alert( $("#lnk").children().length ); // 5 - To check if an element contains another, use the ID selector and the length returned:
alert( $("#lnk").children("#aboutLnk").length ); // 1...or use this shortcut notation with descendant selector, which literally means "find this child node and see if it has this other element as parent": your code becomes shorter and more readable!alert( $("#lnk #aboutLnk").length ); // 1Tip: that exact same technique can be used to check if an element exists on the page.
- A bit more verbose, you can use jQuery's has() function to test if one node includes another:
if( $("#lnk").has("#aboutLnk").length )
alert( "First element contains the one passed to has() !" ); - Because JavaScript evaluates zero and negative numbers as false, and positive numbers as true, you can use the length returned as a true/false test: (length will be zero if the element isn't found).
if( $("#lnk #aboutLnk").length )
alert("This child element exists!"); // Do something useful here...
else
alert("This element wasn't found.");Note: the first line evaluates to true if at least one match found; you can use the same approach to check if multiple children elements exist as well with "if( $("#lnk").children("a").length )".
- You can use other properties with jQuery's powerful selectors when you don't have or don't know the ID of the element you're looking for. How to search by href URL, with an "attribute selector":
// Check for links pointing to "about.html"
if( $("a[href*='about.html']").length )
alert("There *is* a link pointing to About on this page!");
Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery