Tengo una lista donde quiero agregar clases a cada segundo elemento, contando desde el primero.

Aquí está mi lista

<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>

Quiero tenerlo así:

<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>

Aquí está mi código jQuery

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

No es problema agregar las clases 'pares', pero ¿cómo agregar las clases 'impares'? ¿Qué selector debo usar para contar desde el primer elemento de la lista?

4
StaXter 27 oct. 2017 a las 15:23

7 respuestas

La mejor respuesta

Puede usar un selector impar y par de jquery como este

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

Para su requerimiento, primero necesita impar y, aun así, cambiar este jquery de esta manera

$( ".timeline li:odd" ).addClass('even');
$( ".timeline li:even" ).addClass('odd');
7
bipin patel 27 oct. 2017 a las 12:41
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>
0
v-stackOverFollower 27 oct. 2017 a las 13:42

O SOLO esto

document.body.querySelectorAll(".timeline li").forEach(function(node,i){
   node.classList.add(i % 2?"even":"odd");
})
2
Dusan Krstic 27 oct. 2017 a las 12:32

Simplemente agregue el método prev() a su código:

$(".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>
2
SilverSurfer 27 oct. 2017 a las 12:54

Puedes hacer esto:
Repite los elementos que coinciden con ".timeline li" y agrega la clase correcta ya sea que su índice sea par o no.

$(".timeline li").each((index, el) => $(el).addClass(index % 2 ? 'even' : 'odd'));
2
Oli Crt 27 oct. 2017 a las 12:59

Cambio:

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

Para:

    $(".timeline li:nth-child(even)").addClass('even');
0
M. Ferguson 27 oct. 2017 a las 12:26

Si solo desea diseñar elementos, puede orientarlos usando CSS

.timeline li:nth-of-type(2n + 1) {
    background: red;
}
.timeline li:nth-of-type(2n) {
    background: blue;
}
0
Derek Nolan 27 oct. 2017 a las 12:51