Home How do you target only a child of a .each function, and not all elements of that class?

Questions

How do you target only a child of a .each function, and not all elements of that class?

April 5, 2022

I have left/right arrows that when clicked uses jQuery to move an element to the left/right, and the arrow-left element is revealed when the position of .sliding-element has moved past 0.

I am using this code to hide and show the arrow-left element in the runnable snippet below.

$carouselList.animate({
    left: moveto
    }, 400, function() {
    if (moveto == 0) {
      $('.arrow-left').hide(); 
    } else {
      $('.arrow-left').show();
    }
});

The problem is that this hides all the .arrow-left elements, not just the children of this .js-carousel slider element. How can I get it to just hide this single arrow-left, and not all of them on the page?

Thank you

    jQuery(document).ready(function( $ ){

        $(".js-carousel").each(function(){
    
            $('.arrow-left').hide();
    
            var $carousel = $(this),
                $carouselContainer = $carousel.find(".books-container"),
                $carouselList = $carousel.find(".sliding-element"),
                $carouselItem = $carousel.find(".book"),
                $carouselButton = $carousel.find(".js-carousel-button"),
                setItemWidth = function(){
                    $carouselList.removeAttr("style");
                    var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
                    $carouselList.css("width", curWidth);
                },
                slide = function(){
                    var $button = $(this),
                        dir = $button.data("dir"),
                        curPos = parseInt($carouselList.css("left")) || 0,
                        moveto = 0,
                        containerWidth = $carouselContainer.outerWidth(),
                        listWidth = $carouselList.outerWidth(),
                        before = (curPos + containerWidth),
                        after = listWidth + (curPos - containerWidth);
                    if(dir=="next"){
                        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
                    } else {
                        moveto = (before >= 0) ? 0 : curPos + containerWidth;
                    }
                    
/*THIS BIT HERE IS WHAT NEEDS FIXING*/  
                    $carouselList.animate({
                        left: moveto
                        }, 400, function() {
                        if (moveto == 0) {
                          $('.arrow-left').hide(); 
                        } else {
                          $('.arrow-left').show();
                        }
                    });
/*END OF BIT THAT NEEDS FIXING*/    

                };
            $(window).resize(function(){
                setItemWidth();
            });
            setItemWidth();
            
            $carouselButton.on("click", slide);
        
        
        
        });


    });

.books-container {
            overflow: hidden;
        }
        .sliding-element {
            position: relative;
            display: flex;
        }
        .book {
            padding: 1em;
        }
        .arrows {
            position:relative;
            width: 100%;
        }
        .arrow-right {
            right: -5px;
        }
        .arrow-left {
            left: -5px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="slider1" class="js-carousel">
    <div class="books-container">

        <div class="flex flex-wrap sliding-element">
        
        
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div class="arrows">
                        <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
                        <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
                    </div>

    </div>
    </div>
    
    
    <div id="slider2" class="js-carousel">
    <div class="books-container">

        <div class="flex flex-wrap sliding-element">
        
        
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div class="arrows">
                        <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
                        <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
                    </div>

    </div>
    </div>

>Solution :

To target the .arrow-left element within the current .js-carousel in the loop, use the find() method from the jQuery object which holds a reference to the carousel.

Here’s an example of how to do that, along with some minor code improvements:

jQuery($ => {
  $(".js-carousel").each((i, carousel) => {
    let $carousel = $(carousel);
    let $arrowLeft = $carousel.find('.arrow-left').hide();
    let $carouselContainer = $carousel.find(".books-container");
    let $carouselList = $carousel.find(".sliding-element");
    let $carouselItem = $carousel.find(".book");
    let $carouselButton = $carousel.find(".js-carousel-button");

    let setItemWidth = function() {
      $carouselList.removeAttr("style");
      var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
      $carouselList.width(curWidth);
    };

    let slide = function() {
      let $button = $(this);
      let dir = $button.data("dir");
      let curPos = parseInt($carouselList.css("left"), 10) || 0;
      let moveto = 0;
      let containerWidth = $carouselContainer.outerWidth();
      let listWidth = $carouselList.outerWidth();
      let before = (curPos + containerWidth);
      let after = listWidth + (curPos - containerWidth);
      
      if (dir == "next") {
        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
      } else {
        moveto = (before >= 0) ? 0 : curPos + containerWidth;
      }

      $carouselList.animate({
        left: moveto
      }, 400, function() {
        $arrowLeft.toggle(moveto !== 0);
      });
    };

    $(window).on('resize', setItemWidth);
    setItemWidth();
    $carouselButton.on("click", slide);
  });
});

.books-container {
  overflow: hidden;
}

.sliding-element {
  position: relative;
  display: flex;
}

.book {
  padding: 1em;
}

.arrows {
  position: relative;
  width: 100%;
}

.arrow-right {
  right: -5px;
}

.arrow-left {
  left: -5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slider1" class="js-carousel">
  <div class="books-container">
    <div class="flex flex-wrap sliding-element">
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>
    </div>
    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>
  </div>
</div>
<div id="slider2" class="js-carousel">
  <div class="books-container">
    <div class="flex flex-wrap sliding-element">
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>
    </div>
    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>
  </div>
</div>