Question

我想为每个第五个元素添加一个边框。目前的代码我只选择了第5个元素，而不是每个元素......我做错了什么？

jquery的：

$(document).ready(function() {  

        $("#categories .cat:nth-child(5)").css({border: '1px solid red', color: '#ff0000'});

});

HTML：

<div id="categories">
    <div class="cat">   cat1    </div>
    <div class="cat">   cat2    </div>
    <div class="cat">   cat3    </div>
    <div class="cat"> cat4 </div>
    <div class="cat">   cat5    </div>
    <div class="cat">   cat6    </div>
    <div class="cat">   cat7    </div>
    <div class="cat">   cat8    </div>
    <div class="cat"> cat9 </div>
    <div class="cat">   cat10   </div>
</div>

Answer 1

使用此：

$("#categories .cat:nth-child(5n)")

注意5n。

Answer 2

没有测试它，但你可以尝试这样的事情：

$(document).ready(function() {  
    var counter = 1;
    $("#categories").children().each(function(){ 
        if(counter%5==0)
            $(this).css({border: '1px solid red', color: '#ff0000'});
        counter++;
    });
});

Answer 3

请记住，CSS3选择器还允许您在不使用javascript的情况下执行此操作：

#categories:nth-child(5n) {
    color: #ff0000;
    border: 1px solid red; }

注意：This does not work in IE8 or earlier.

我不建议单独使用它，而是建议使用javascript解决方案（以确保跨浏览器兼容性）。我只是认为你可能有两个兼容CSS3的浏览器在应用Javascript时不会遇到任何闪烁的情况。

如何为每个第五个div元素添加特定样式？

3 个答案: