jQuery 'each' function and 'this' variable

Question

I have created a Fiddle here: https://jsfiddle.net/svyyow89/4/

As you resize the screen some elements in the row are hidden, and a counter shows the number of hidden elements.

I had this working properly when I only has a single "container" element, but I need the script to do the same thing for every element with the "container" class.

As shown in my fiddle I have the code working to show/hide elements as the screen is resized. However it appears as though the text counters just set themselves to the same value, when each "container" contains a different number of "items". I thought my use of the "this" variable would mean the code would treat the elements in "container" separately.

I would appreciate any help you can provide.

$(window).on('resize',function() {

    $(".container").each(function(){
          var numImages = $(this).find(".item").length;
          var numToShow = numImages;
          var screenWidth = $( window ).width();
          var numFit = Math.floor(screenWidth / 80);

          $(this).find( ".item" ).removeClass( "item-show" );
          $(this).find( ".more" ).removeClass( "more-show" );
          $(this).find('.more').html('');

          if(numFit < numImages){
              numToShow = numFit - 1;
              $(this).find('.more').addClass("more-show");
          } else {
              $(this).find('.more').removeClass("more-show");
          }

          $(this).find( ".item" ).slice( 0, numToShow ).addClass( "item-show" );

          var numHidden = $(".container > *").filter(":hidden").size();

          $(this).find('.more').html('+'+numHidden+' more');

   });
});

$(document).ready(function() {
    $(window).trigger('resize');
});

FWIW, next time instead of a fiddle, consider doing a Stack Snippet (the [<>] toolbar button). Much the same, but on-site. :-) (There are some things you can do in a fiddle you can't do in a snippet -- local storage, form submissions -- but most of the time, a snippet is just as good and more convenient for people helping.) — T.J. Crowder
– T.J. Crowder, Commented Sep 26, 2017 at 17:36
But a really well-asked question, which seems to be getting more and more unusual. :-) — T.J. Crowder
– T.J. Crowder, Commented Sep 26, 2017 at 17:39

T.J. Crowder · Accepted Answer · 2017-09-26 17:38:19Z

3

Mostly you're doing it right, you just missed out one statement:

var numHidden = $(".container > *").filter(":hidden").size();

You need to use this there, too:

var numHidden = $(this).children(":hidden").size();

(Using children because you used the direct child combinator >, and children can accept a filter so we can fold the filter into it.)

Separately, though, remember that $() is a function. Every time you call it, it has to do work, and every time you call it, it allocates memory that eventually has to be cleaned up (memory churn). So rather than writing $(this) everywhere, do it once (in the each callback) and remember the result:

var $this = $(this);

This is important in any performance-sensitive code (such as a resize handler), and generally (not always) good practice anyway.

edited Sep 26, 2017 at 17:38

answered Sep 26, 2017 at 17:33

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery 'each' function and 'this' variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related