Question

我有这样的HTML：

<div id="content">
    <div class="view-row view-row-1">
    <div class="view-row view-row-2">
    <div class="view-row view-row-3">
    <div class="view-row view-row-4">
    <div class="view-row view-row-5">
    <div class="view-row view-row-6">
</div>

我需要为行添加CSS样式 - 2, 5, 8, 11, 14等等。可能有很多.view-row-number个元素，例如40个。

$('.content .view-row').each( function(i) {
    if ($(this).hasClass('view-row-2') ) {
        $(this).css('padding-left', '7px');
    }
    else if($(this).hasClass(?)) {
    }
});

实现这一目标的最佳方法是什么？

Answer 1

您想要使用nth-child选择器，如下所示：

$("#content .view-row:nth-child(3n-1)").addClass("highlight");

Example fiddle

然后，您可以将所需的样式放在CSS类中，以保持关注点的良好分离。

Answer 2

你在循环中得到了迭代器，所以你可以这样做：

$('.content .view-row').each( function(i) {
    if ((i + 2) % 3 == 0) { $(this).css('padding-left', '7px'); }
});

或使用css3选择器nth-of-type：

$('.content .view-row:nth-of-type(3n-1)').css('padding-left', '7px');

Answer 3

不要过于复杂 -

$('#content div:nth-child(3n-1)').addClass('foo');

Answer 4

var num = 2;
$('.content .view-row').each( function(i) {
            if ($(this).hasClass('view-row-'+num) ) {
                num = num + 3;
                $(this).css('padding-left', '7px');
            }
            else if($(this).hasClass(?)) {

            }
           });

为每个第3个元素添加CSS样式

4 个答案: