Question

我使用JQuery代码段为奇数索引的li标签添加类名。

<div class="test">

  <ul class="list1">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
  </ul>

  <ul class="list2">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
  </ul>

</div>

这是JQuery代码段。

$('.test li:odd').addClass('red');

此代码段添加了“红色”字样。＆class;＆＃39; list1＆＃39;的第1，第3，第5 li标签和第2个，第4个li标签＆＃39; list2＆＃39; （因为它将所有li标签作为单个列表然后选择奇数索引）

但我想分别列出list1和list2的奇数索引（＆＃39; list1＆＃39;和第1，第3个li标签＆＃39; list2＆＃39; <的第1个，第3个，第5个li标签/强>）

我怎样才能做到这一点？

Answer 1

改为使用:nth-child(odd)伪类：

＆＃13;

$(function() {
  $('button').click(function() {
    $('.test li:nth-child(odd)').addClass('red');
  });
});

＆＃13;

.red {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">

  <ul class="list1">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
  </ul>

  <ul class="list2">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
  </ul>

</div>
<button type="button">Press me</button>

＆＃13;

Answer 2

jQuery的:odd选择器计算文档中元素的顺序。基本上，$(selector)中的顺序：

所选元素的顺序为它们在文档中的外观。（source）

您需要使用nth-child(odd)，而不是。

＆＃13;

$('.test li:nth-child(odd)').addClass('red');
$('.test li:odd').addClass('underline');

＆＃13;

.red {
  background: red;
}

.underline{
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <ul class="list1">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>
  <ul class="list2">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</div>

＆＃13;

或者完全避免使用JS：

＆＃13;

li:nth-child(odd) {
  background: red;
}

＆＃13;

<div class="test">
  <ul class="list1">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>
  <ul class="list2">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</div>

＆＃13;

Answer 3

只是提供另一种选择;你可以轻松地做到这一点没有JavaScript

＆＃13;

li:nth-child(odd) {
  background-color: red;
}

＆＃13;

<div class="test">

  <ul class="list1">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
  </ul>

  <ul class="list2">
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
  </ul>

</div>

＆＃13;

将JQuery Odd选择器用于单独的ul标记

3 个答案: