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

使用每个（）：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整除的东西，第二次：甚至会给你所有的平均值......可被4整除。

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

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

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

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

将类应用于每个第1和第4项

4 个答案: