1

我想使用 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/

我究竟做错了什么？

4

2 回答 2

3

您需要使用偏移量：

$('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 的第三个实例。

于 2013-08-10T17:18:22.770 回答
-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小提琴

于 2013-08-10T17:16:34.763 回答