JQuery loop hide items

Question

I want to show only 4 item and hide other items. how i can do it

$(".item").each(function(i, e){
      if(i == 4 ){
          $(this).addClass("hide");
      }
  })

Is 4 a constant value for what you want to do? Is it fourth item and below that you want to hide? When do you want to show them again? — Ja͢ck
– Ja͢ck, Commented Feb 25, 2020 at 14:40
In pure jQuery you would do $('.item').slice(3).addClass('hide') or use :gt() inside the query; you could use .hide() as well, unless the hide class does something else — Ja͢ck
– Ja͢ck, Commented Feb 25, 2020 at 14:43

Mr world wide · Accepted Answer · 2020-02-25 14:53:37Z

2

As per syntax, if you write i == 4 only at 4th loop it will hide. you have to write i > 3 because array starts from zero(0), which will hide all after 4 items

$(".item").each(function(i, e){
      if(i > 3){ 
         $(this).addClass("hide");
      }
})

Or simply you can do this:

$('.item').slice(3).addClass('hide')

answered Feb 25, 2020 at 14:53

Mr world wide

4,86410 gold badges47 silver badges105 bronze badges

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

Comments

Mitya · Accepted Answer · 2020-02-25 14:37:57Z

0

You don't say if you want to show only the first four, or a particular four, but your code attempt suggests the former.

In which case, you don't need JavaScript at all - you can do it from CSS.

.item:nth-of-type(4) ~ .item { display: none; }

If for some reason you wish to do it with JS nonetheless, you could do:

$('.item:nth-child(4)').nextAll('.item').hide();

answered Feb 25, 2020 at 14:37

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

1 Comment

Mitya Over a year ago

You're welcome. That is what happens.

Collectives™ on Stack Overflow

JQuery loop hide items

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related