1

我有这样的 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(?)) {
    }
});

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

4

4 回答 4

7

您想像这样使用nth-child选择器：

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

示例小提琴

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

于 2012-11-23T13:25:08.060 回答
4

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

$('.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');
于 2012-11-23T13:24:02.093 回答
3

不要过度复杂化——

$('#content div:nth-child(3n-1)').addClass('foo');
于 2012-11-23T13:25:57.053 回答
0 
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(?)) {

            }
           });
于 2012-11-23T13:22:49.467 回答