设置div的类动态地在其父级内的div位置

Question

我有类似的东西

<div id="parentdiv">
     <div class="childiv"></div>
     <div class="childiv"></div>
     <div class="childiv"></div>
     <div class="childiv"></div>
     <div class="childiv"></div>
     <div class="childiv"></div>
</div>

我想动态地将一个类添加到第三个＆amp; 6th childdiv和1,2,4,5th divs的另一个类。任何想法？

Answer 1

如果您正在查看可以执行的每个第3个元素：

$('.childiv:nth-child(3n+0)')
        .addClass('something')
        .siblings(":not(:nth-child(3n+0))")
        .addClass('somethingElse');

Answer 2

.addClass()函数可以使用回调函数，该函数传递元素的索引并返回要添加的类。

$('#parentdiv').children().addClass(function(i) {
    return ((i % 3) == 2) ? 'class1' : 'class2';
});

Answer 3

<强> fiddle demo

HTML

<div id="parentdiv">
     <div class="childiv">1</div>
     <div class="childiv">2</div>
     <div class="childiv">3</div>
     <div class="childiv">4</div>
     <div class="childiv">5</div>
     <div class="childiv">6</div>
</div>

JQuery的

$("#parentdiv").find(".childiv:nth-of-type(3n)").addClass('class1');
$("#parentdiv").find(":not(.childiv:nth-of-type(3n))").addClass('class2');

CSS

.childiv
{
    font-weight:bold;
}
.class1
{
    color:red;
}
.class2
{
    color:blue;
}