Question

我想使用jQuery为重复div添加不同的类但它没有按预期工作......这是我的JavaScript：

$('div.cake:nth-of-type(1n)').css('border-bottom', '3px solid red');
$('div.cake:nth-of-type(2n)').css('border-bottom', '3px solid blue');
$('div.cake:nth-of-type(3n)').css('border-bottom', '3px solid green');
$('div.cake:nth-of-type(4n)').css('border-bottom', '3px solid yellow');

这是我的HTML：

<section id="menu">

    <h1>Title</h1>
    <p>Texty text lorem ipsum blah blah</p>

    <div class="cake">
        <a href="#"><img src="http://lorempixel.com/400/400/food/1/" />
        <span class="caption">Image 1 here</span></a>
    </div>

    <div class="cake">
        <a href="#"><img src="http://lorempixel.com/400/400/food/2/" />
        <span class="caption">Image 2 here</span></a>
    </div>

    <div class="cake">
        <a href="#"><img src="http://lorempixel.com/400/400/food/3/" />
        <span class="caption">Image 3 here</span></a>
    </div>

    <!-- And so on... -->

</section>

我希望第一个div底部的边框为红色，第二个div为蓝色，第三个为绿色，第四个为黄色，然后为红色，蓝色，绿色，黄色等。，但它没有完全奏效。这是一个小提琴：http://jsfiddle.net/7bLZ3/

我做错了什么？

Answer 1

您需要使用偏移量：

$('div.cake:nth-of-type(4n+1)').css('border-bottom', '3px solid red');
$('div.cake:nth-of-type(4n+2)').css('border-bottom', '3px solid blue');
$('div.cake:nth-of-type(4n+3)').css('border-bottom', '3px solid green');
$('div.cake:nth-of-type(4n+4)').css('border-bottom', '3px solid yellow');

原因是例如在设置2n之后，第4项也被设置...然后4n将覆盖它并且自然它不能正常工作。更不用说1n将它们全部设置，3n将设置项目3和6，这将覆盖2n的第3个实例。

Answer 2

并且，对于没有nth-of-type()支持的任何人：

var btmColors = [];
btmColors[0] = 'red';
btmColors[1] = 'blue';
btmColors[2] = 'green';
btmColors[3] = 'yellow';
$('div.cake').css('border-bottom-width', '3px').css('border-bottom-style', 'solid').css ('border-bottom-color', function (i) {
        return btmColors[i % 4];
});

js Fiddle

CSS nth-of-type没有按顺序选择

2 个答案: