CODEWITHSUNDEEP
javascriptjquerycsshtml
StaXter
StaXter

Reputation: 211

Add Class to every second element, count from the first

I have a list where I want to add classes to every second element, counting from the first one.

Here's my list

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
</ul>

I want to have it like this:

<ul class="timeline">
  <span class="topbullet"></span>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
</ul>

Here's my jQuery Code

$(".timeline li:nth-of-type(2n)").addClass('even');

It's no problem to add the 'even' classes, but how to add the 'odd' classes? Which selector should I use to count from the first list element?

Upvotes: 4

Views: 6392

Answers (7)

v-stackOverFollower
v-stackOverFollower

Reputation: 595

You can add odd/even class like the below example.


$(document).ready(function() {
  $('ul.listul li:even').addClass('even');
  $('ul.listul li:odd').addClass('odd');
});
li.even {
  color: #000;
}

li.odd {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listul">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
  <li>list4</li>
  <li>list5</li>
  <li>list6</li>
</ul>

Upvotes: 0

Oli Crt
Oli Crt

Reputation: 1173

You could do this:
Iterate through the elements matching ".timeline li" and add the correct class whether its index is even or not.

$(".timeline li").each((index, el) => $(el).addClass(index % 2 ? 'even' : 'odd'));

Upvotes: 2

SilverSurfer
SilverSurfer

Reputation: 4365

Just simply add prev() method to your code:

$(".timeline li:nth-of-type(2n)").addClass('even').prev().addClass('odd');
.even{
  color:red;
}
.odd{
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <span class="topbullet">Span</span>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
  <li>Li</li>
  <li>Li</li>
  <div class="clearfix">Div</div>
</ul>

Upvotes: 2

Derek Nolan
Derek Nolan

Reputation: 744

If you just want to style elements you can target them using css

.timeline li:nth-of-type(2n + 1) {
    background: red;
}
.timeline li:nth-of-type(2n) {
    background: blue;
}

Upvotes: 0

bipin patel
bipin patel

Reputation: 2111

You can use odd and even selector of jquery like this

$( ".timeline li:odd" ).addClass('odd');
$( ".timeline li:even" ).addClass('even');

For your requirement you need to first odd and than even so you change this jquery like this

$( ".timeline li:odd" ).addClass('even');
$( ".timeline li:even" ).addClass('odd');

Upvotes: 7

Dusan Krstic
Dusan Krstic

Reputation: 705

Or JUST this

document.body.querySelectorAll(".timeline li").forEach(function(node,i){
   node.classList.add(i % 2?"even":"odd");
})

Upvotes: 2

M. Ferguson
M. Ferguson

Reputation: 1421

Change:

$(".timeline li:nth-of-type(2n)").addClass('even');

to:

    $(".timeline li:nth-child(even)").addClass('even');

Upvotes: 0

Related Questions