jQuery also has specific filters to target node's children. Here, you'll discover more about them.
The filters belonging to this category are:
|
Name |
Description |
|---|---|
|
|
Retrieves the elements that are the first child of their parent. |
|
|
Collects the elements that are the first of the given type (element name). |
|
|
Retrieves the elements that are the last child of their parent. |
|
|
Collects the elements that are the last of the given type (element name). |
|
|
Retrieves all elements that are the nth-child of their parent. |
|
|
Selects all elements that are the nth-child of their parent, counting from the last element to the first. |
|
|
Selects all elements that are the nth-child of their parent, counting from the last element to the first. |
|
|
Collects all elements that are the nth child of their parent in relation to siblings with the same element name. |
|
|
Retrieves all of the elements that are the only child of their parent. |
|
|
Retrieves the elements that have no siblings with the same element name. |
The filters :nth-child(), :nth-last-child(), :nth-last-of-type(), and :nth-of-type() accept a selector that can be an index, even, odd, or an equation. Please note that :nth-last-child() and :nth-last-of-type() use the index starting from the end to turn back.
Besides this, there are some differences between these filters and those we've seen in the Selecting by position using filters (Should know) recipe:
Note
Differently from the :eq() and similar filters, their index starts from one (1) instead of zero (0). Besides, while even and odd are very easy to understand, this isn't the same with equation. The latter is a string having unknown variable as n. So, if you want to target the element at position multiple of three (for example 3, 6, 9, and so on), you need to write 3n.
To complete the recipe, follow these steps:
Create a copy of the
template.htmlfile and rename it aschild-filters.html.Inside the
<body>tag, add the following HTML markup:<h1 id="title">A great title</h1> <div class="wrapper"> <h2>A subtitle</h2> <p>This is the first paragraph.</p> <p id="description" class="border">I'm a paragraph.</p> </div> <div id="content"> <h2>jQuery is so cool!</h2> <p class="border">I'm yet another paragraph</p> <ul> <li>The first of the list</li> <li>I'm the second, not bad!</li> <li>Third list item here</li> <li>Fourth list item here</li> <li>Fifth list item here</li> </ul> <h2>Another subtitle</h2> </div>Edit the
<head>section of the page adding this code:<script> $(document).ready(function() { $('div > h2:first-of-type').css('background-color', '#976FAC'); $('li:nth-child(3n+1)').css('color', '#9FB35A'); }); </script>Save the file and open it with your favorite browser.
As you can see by looking at the code, the more you read the more our selectors become complex.
In the first line of our recipe, in fact, we're using at the same time the Child selector together with two Element selectors and a Child filter. Our goal is to apply a background color to the <h2> instances that are the first child of a <div> section. If you open the source with your browser, you can see that the background is applied to all of the <h2> instances of the page, but not the one having text Another subtitle. In fact, the latter doesn't match the condition of being the first <h2> inside the <div> section because it appears after the one having text "jQuery is so cool!."
In the second line, we're targeting the <li> instances that are multiples of 3 plus 1 (1, 4, 7, and so on) to change their text color. As you can see, the second line is really interesting because it proves the possibility of using an equation as an index selector. This is a really powerful system since you can not only target multiples of a given number, but also add a specific one, hence the use of the +1 in our equation. Its use can really simplify your life in several cases, so use it when possible instead of creating a complex loop.