Question

如何为每个div号码4,8,12,16等添加“last”类。我认为这不是大问题吗？

之前：

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
</div>

之后

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div class="last">Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div class="last">Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div class="last">Element 12</div>
</div>

感谢。

Answer 1

$('#main > div:nth-child(4n)').addClass('last');

示例小提琴：http://jsfiddle.net/T7fE6/

注意：如果您必须对这些元素应用某种样式（并且您不支持IE8或以前的IE浏览器），您可以简单地将该选择器定义到CSS中，例如。

 #main > div:nth-child(4n) {
     /* supported by IE9+ and all modern browser */
 }

Answer 2

如果您的标记确实只是 div个元素，那么F. Calderan's answer就可以了。

如果你可能还有其他元素而你想忽略这些元素，你可以这样做：

$("#main > div").filter(function(index) {
  return index % 4 === 3;
}).addClass("last");

Live example | source

那是因为即使div:nth-child(4n) 看起来像，它也意味着每四个div，但它不是;它表示div是父容器中的第4，第8等元素。因此，如果你把其他人扔进那里，它就行不通了。

但是，如果你只有div，那么F的回答是可行的。

Answer 3

你可以这样做

$(document).ready(function(){
 $('#main div').each(function(e){
     if((e+1) % 4 == 0){
         $(this).addClass('last');
     }
 });
})

这是正在运行的示例

Find the example here

希望它有所帮助...

将等级“last”添加到每个div号码4,8,12,16等

3 个答案: