Как применить CSS для каждого второго ребенка, используя nth-child () с jquery

Question

Привет, я хочу применить стиль на каждом втором <li>

Я пытался

<script>
$(document).ready(function(){
$('#cl li:nth-child(2)').css('color', 'red');    
})
</script>

Html

<ul id="cl">
  <li>home</li>
  <li>home2</li>
  <li>home3</li>
  <li>home4</li>
  <li>home5</li>
  <li>home6</li>
</ul>

с помощью этого кода я могу применить стиль только ко второму ребенку. как я могу применить стиль к каждому второму ребенку

Спасибо заранее :)

Answer 1

Использование :odd селектора:

$('#cl li:odd').css('color', 'red');

http://api.jquery.com/odd-selector/

Вот Jsfiddle:

http://jsfiddle.net/uKX3t/1/

Причина, по которой вам нужноиспользование :odd в отличие от :even объясняется тем, что дочерние элементы имеют индекс 0, что означает, что <li>home</li> является 0-м дочерним элементом, а <li>home2</li> является первым дочерним элементом, который является нечетным.

Цитата из документации:

В частности, обратите внимание, что индексирование на основе 0 означает, что, нечетко,: odd выбирает второй элемент, четвертый элемент и т. Д. В соответствующем наборе.

Как ни странно, вам нужно использовать odd селектор (каламбур)

Answer 2

Попробуйте вместо этого -

$('#cl li:odd').css('color', 'red');