The .each() method in jQuery is a powerful utility for iterating over a set of matched elements. When combined with traversal methods, .each() allows you to perform operations on each element individually, including navigating and manipulating their related elements.

How .each() Works

The .each() method iterates over a jQuery object, executing a function for each matched element. The function receives two arguments:

1. Index: The index of the current element in the set.
2. Element: The current element being processed.

Syntax

$(selector).each(function(index, element) {
  // Code to execute for each element
});

Example of .each() with Traversal

Let's explore how to use .each() in combination with traversal methods:

Example 1: Using .each() with .find()

Suppose you have a list of ul elements, and you want to add a class to each li element within these lists.

<ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>
<ul class="menu">
    <li>Blog</li>
    <li>Gallery</li>
</ul>

$(".menu").each(function() {
  $(this).find("li").addClass("highlight");
});

• Explanation:
  • $(".menu").each(function() { ... }) iterates over each ul with the class menu.
  • $(this).find("li") finds all li elements within the current ul.
  • .addClass("highlight") adds the highlight class to each li within that ul.

Example 2: Using .each() with .siblings()

If you want to set a specific style for the siblings of each selected element:

<div>
    <p class="target">Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>
<div>
    <p>Paragraph 4</p>
    <p class="target">Paragraph 5</p>
    <p>Paragraph 6</p>
</div>

$(".target").each(function() {
  $(this).siblings().css("color", "blue");
});

• Explanation:
  • $(".target").each(function() { ... }) iterates over each p with the class target.
  • $(this).siblings() selects all siblings of the current p element.
  • .css("color", "blue") changes the text color of these siblings to blue.

Example 3: Using .each() with .parent() and .children()

Let's say you want to add a border to the parent of each selected element and style its children:

<div>
    <p>Paragraph 1</p>
    <p class="highlight">Paragraph 2</p>
</div>
<div>
    <p>Paragraph 3</p>
    <p class="highlight">Paragraph 4</p>
</div>

$(".highlight").each(function() {
  $(this).parent().css("border", "2px solid red")
                 .children().css("font-weight", "bold");
});

• Explanation:
  • $(".highlight").each(function() { ... }) iterates over each p with the class highlight.
  • $(this).parent() selects the parent div of the current p.
  • .css("border", "2px solid red") adds a red border to the parent div.
  • .children().css("font-weight", "bold") makes all children of that div bold.

Practical Use Cases

1. Applying Styles or Classes to Related Elements

You might want to style related elements based on a condition or specific pattern:

$("section").each(function() {
  $(this).find("h2").addClass("section-title");
});

2. Performing Actions on Elements with Related Content

If you need to update or perform actions based on a relationship between elements:

$(".item").each(function() {
  $(this).next(".details").fadeIn();
});

3. Dynamic Content Manipulation

For dynamic content where you need to adjust multiple elements based on some criteria:

$(".post").each(function() {
  if ($(this).find(".comments").length > 0) {
    $(this).addClass("has-comments");
  }
});