jQuery counter and adding a class but not to the first two?

Question

I'm checking list items I have and if there are more than two then I add a class. This works fine but I want the class to start adding after the first two list items. I am not sure how to do that part that excludes adding the class to the first two. Here is my code:

$(document).ready(function() {
  //Checking how many time the class appears
  var numItems = $('ul.singleMagazine li').length;
  if (numItems > 2) {
    alert(numItems);
    //Want to add this class but not to the first two - exclude first two list items and then add it to the rest. How to do it?
    $('ul.singleMagazine li').addClass("newClass");
  }
});

How I would do the excluding part?

you can use gt() selector.

Furquan Khan
– Furquan Khan

2018-06-05 12:25:50 +00:00
Commented Jun 5, 2018 at 12:25 — Furquan Khan
– Furquan Khan, Commented Jun 5, 2018 at 12:25

Rory McCrossan · Accepted Answer · 2018-06-05 12:25:27Z

2

The li elements should be siblings, so you can use the gt() selector:

$('ul.singleMagazine li:gt(1)').addClass("newClass");

Also note that the length check is redundant as if there's less than two items the above won't do anything anyway.

answered Jun 5, 2018 at 12:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

bob Over a year ago

Hi Rory, thank you for this. Is gt() new in jquery? I've never come across it in years.... Thank you!

Rory McCrossan Over a year ago

Glad to help, and not really - it was added in 1.0: api.jquery.com/gt-selector

bob Over a year ago

Thanks again, shame I've not come across it beforehand!

Furquan Khan · Accepted Answer · 2018-06-05 12:26:55Z

1

You can use gt selector. https://api.jquery.com/gt-selector/

$('ul.singleMagazine li:gt(1)').addClass("newClass");

This will add the class only to the li's which are greater than 1. Note here that the indexing starts from 0.

answered Jun 5, 2018 at 12:26

Furquan Khan

1,5941 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery counter and adding a class but not to the first two?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related