对每个第 1 项和第 4 项应用一个类

Question

我有一个包含 16 项的清单。有 4 行，每行 4 个项目。 如何将类“.first”添加到每行的第一项，将“.fourth”添加到每行的第四项。

结果：

<ul>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
  <li class="first"></li>
  <li></li>
  <li></li>
  <li class="fourth"></li>
</ul>

Answer 1

试试这个：

$(function(){
     // You can use a more specific li selector as per your requirement
    $("li").each(function(a, b){
        if(a%4 == 0){
            $(b).addClass("first");
        }
        if(a%4 == 3){
            $(b).addClass("fourth");
        }
    });
});

编辑：

使用nth-child：

$(function(){
    var ul = $("ul");//You can use more specific UL
    ul.find(":nth-child(4n-3)").addClass("first");
    ul.find(":nth-child(4n)").addClass("fourth");
});

工作示例：http://jsfiddle.net/ qmHNQ/

Answer 2

听起来您想使用 CSS 选择器 :nth-child 或 :nth-of-type。您可以在 jQuery 中使用它们来添加类，也可以直接将它们用作伪类并跳过添加额外的属性。

Answer 3

使用each()： http://api.jquery.com/jQuery.each/

jQuery.each('ul li', function(indexInArray, valueOfElement){
    if ((indexInArray % 4) == 0) { $(this).addClass('first'); }
    if ((indexInArray % 4) == 3) { $(this).addClass('fourth'); }
});

Answer 4

我想知道您是否可以使用“:even”过滤器两次。第一次，你会得到所有能被 2 整除的数，第二次 :even 会给你所有偶数...能被 4 整除。

$("li:gt(0):even:even").addClass("fourth");

要设置第 1 个、第 5 个等...你可能会得到所有li 除外第一个并应用“第一”类。然后，也设置第一个。

$("li:first").addClass("first");
$("li:gt(1):even:even").addClass("first");

好吧……这确实有效，但看起来像是一次性的。这应该有效。