Each Loop

Basic example

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

// 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.

// 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.

// 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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>