【问题标题】:How to add several classes to ul list如何将几个类添加到 ul 列表
【发布时间】:2011-01-17 07:19:42
【问题描述】:

如何将多个类添加到 ul 列表?我不想将它添加到每个 li 项目中,而只是其中的一些。

编辑:

我想用 jQuery 添加类。像这样:

<ul>
    <li>something1</li>
    <li>something2</li>
    <li>something3</li>
    <li>something4</li>
    <li>something5</li>
</ul>

现在我想在第二个(第 3、第 4 和第 5 个 li 元素)之后的每个 li 添加类。我知道如何添加课程,但我怎样才能让它在每个 li 中重复。真的是我的问题。

【问题讨论】:

  • 看来您真正要问的是“是否有一个 jQuery 选择器来选择第三个之后的奇数列表项?”。也许您应该为此发布另一个问题...

标签: jquery list class addclass html-lists


【解决方案1】:

您可以使用.filter() 方法过滤您的选择。

$('li').filter(':nth-child(n+3)').addClass('className');

现在,任何符合此条件的东西都将获得类属性。在您的示例中,第 3、第 4 和第 5 li 将收到它。

【讨论】:

    【解决方案2】:

    有几种方法可以访问特定的元素索引。

    :eq() 选择器可以访问单个索引:

    $('li:eq(1)')
    

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

    .nextAll() 函数返回匹配元素集中每个元素的所有后续兄弟:

    $('li:eq(2)').nextAll();
    

    http://api.jquery.com/nextAll/

    .prevAll() 的工作方式相同,但返回之前的兄弟姐妹:

    $('li:eq(2)').prevAll();
    

    http://api.jquery.com/prevAll/

    【讨论】:

      【解决方案3】:

      您的问题不够详细,但通常您需要根据需要在特定的 li 元素上设置类。

      例如:

      <ul>
      <li class="first winter thirty-one">January</li>
      <li class="winter">February</li>
      <li class="spring thirty-one">March</li>
      <li class="spring">April</li>
      <li class="spring thirty-one">May</li>
      <li class="summer">June</li>
      <li class="summer schools-out thirty-one">July</li>
      <li class="summer schools-out thirty-one">August</li>
      <li class="fall">September</li>
      <li class="fall thirty-one">October</li>
      <li class="fall">November</li>
      <li class="last winter thirty-one">December</li>
      </ul>
      

      【讨论】:

      • 哦,是的,对不起。我需要知道如何使用 jquery 来做到这一点。有关详细信息,请参阅最后的答案 cmets。
      【解决方案4】:

      好吧,要为 ul 中的每个 li 添加 3 个类,您可以这样做:

      $("#myUl > li").addClass("class1 class2 class3");
      

      由于您没有为要获取其他类的li 元素指定任何条件,我不得不猜测:

      $("#myUl > li:even").addClass("class1 class2 class3");
      

      这会将三个类添加到每隔一个li(更准确地说,是零索引数组中的偶数元素)。

      祝你好运。

      【讨论】:

      • 嗯,这里有更好的解释:
        • something1
        • something2
        • something3
        • something4
        • something5
        现在我想在第二个(第 3、4 和第 5 个 li 元素)之后的每个 li 添加类。我知道如何添加课程,但我怎样才能让它在每个 li 中重复。那真的是我的问题。
      • 如果您仍然对答案感兴趣,您应该将此评论添加为问题的一部分并正确格式化代码。
      猜你喜欢
      • 2021-07-02
      • 2020-07-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-02-10
      • 2014-07-31
      • 1970-01-01
      相关资源
      最近更新 更多