# Each Loop

## Basic example

Assign a unique item number to a text element within each CMS item.

```javascript
// repeats for each .work-cms-item on the page
$(".work-cms-item").each(function (index) {
    // select only the text element inside this current item
    let childText = $(this).find(".child-text");
    // set its text to the current index + 1
    childText.text(index + 1);
});
```

* This each loop runs for each `work-cms-item` on the page. 
* Inside the loop, `$(this)` refers to the item we're currently looping through instead of every cms item.
* `index` starts at zero. Each time the loop runs, index increases by 1. 
  * For item 1, index equals 0. 
  * For item 2, index equals 1. 
  * For item 3, index equals 2.

***

## Multiple instances of the same section

When we have multiple instances of the same section type on a page, this each loop ensures that elements within a section only impact other elements within that same section.

```javascript
// repeats for each cta-section on the page
$(".cta-section").each(function (index) {

    // selects only the heading & button inside this current section
    let currentHeading = $(this).find(".cta-heading");
    let currentButton = $(this).find(".cta-button");
    
    // on mouseenter of this section's button
    currentButton.on("mouseenter", function () {
        // add class to this section's heading
        currentHeading.addClass("is-large");
    });
    
    // on mouseleave of this section's button
    currentButton.on("mouseleave", function () {
        // remove class from this section's heading
        currentHeading.removeClass("is-large");
    });
    
});
```

***

## Connecting two collection lists

When we hover over a `cms-trigger-item`, we want to show only the matching target item and hide all other target items.

<div align="left"><figure><img src="/files/u22DCk4kaU44nH38UGFs" alt="" width="284"><figcaption></figcaption></figure></div>

```javascript
// repeats for each .cms-section on our page
$(".cms-section").each(function () {

  // find the trigger & target items inside this section
  let triggerItems = $(this).find(".cms-trigger-item");
  let targetItems = $(this).find(".cms-target-item");

  // pass any number into the function to make that item active
  function makeItemsActive(index) {
    // removes is-active from all triggers & targets inside this section
    triggerItems.add(targetItems).removeClass("is-active");
    // adds is-active to the trigger at the selected index
    let currentTrigger = triggerItems.eq(index).addClass("is-active");
    // adds is-active to the target at the selected index
    let currentTarget = targetItems.eq(index).addClass("is-active");
  }
  makeItemsActive(0); // makes the first item active on page load

  // on hover of any trigger items within this section
  triggerItems.on("mouseenter", function () {
    // get the index of this item
    let itemIndex = $(this).index();
    // make it active
    makeItemsActive(itemIndex);
  });
  
});
```

### Animating only the currently active and previously active items

```javascript
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script>
$(".cms-section").each(function () {

    let triggerItems = $(this).find(".cms-trigger-item");
    let targetItems = $(this).find(".cms-target-item");
    let prevTriggerItem;
    let prevTargetItem;
    
    function makeItemsActive(index) {
        // get the current active items
        let currentTriggerItem = triggerItems.eq(index);
        let currentTargetItem = targetItems.eq(index);
        // animate text
        gsap.to(prevTriggerItem, { opacity: 0.4, color: "white" });
        gsap.fromTo(currentTriggerItem, { opacity: 0.4, color: "white" }, { opacity: 1, color: "yellow" });
        // animate images
        gsap.to(prevTargetItem, { opacity: 0, scale: 0.8 });
        gsap.fromTo(currentTargetItem, { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1 });
        // store previously active items for next time function runs
        prevTriggerItem = currentTriggerItem;
        prevTargetItem = currentTargetItem;
    }
    makeItemsActive(0);

    triggerItems.on("mouseenter", function () {
        if (!$(this).is(prevTriggerItem)) {
            let itemIndex = $(this).index();
            makeItemsActive(itemIndex);
        }
    });
    
});
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jquery.timothyricks.com/each-loop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.