Javascript CSS第n个类型未按顺序选择

我想使用jQuery向repeating

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>

标题
text text lorem ipsum诸如此类

我希望第一个

div

的底部有红色边框，第二个

div

的底部有蓝色边框，第三个是绿色边框，第四个是黄色边框，然后是红色、蓝色、绿色、黄色边框，等等，但效果不太理想。这是一把小提琴：

---

我做错了什么？

对于没有

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];
});

---

对于没有

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];
});

---

您需要使用偏移：

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

您需要使用偏移：

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

很好。你在看什么？前4部作品。。那不是为了我你试过其他浏览器吗？第n种类型的

n不是新采用的吗？请确保您使用的是jQuery 1.9或更高版本。直到那个版本，
n类型的
n才被实现。@putvande请参考JSFIDLE。前四个
div
s有正确的边框颜色（红色、蓝色、绿色、黄色），然后第五个
div
是红色，第六个
div
是绿色（应该是蓝色），第七个
div
是红色（应该是绿色），第9个
div
为绿色（应为红色）。工作正常。你在看什么？前4部作品。。那不是为了我你试过其他浏览器吗？第n种类型的
n不是新采用的吗？请确保您使用的是jQuery 1.9或更高版本。直到那个版本，
n类型的
n才被实现。@putvande请参考JSFIDLE。前四个
div
s有正确的边框颜色（红色、蓝色、绿色、黄色），然后第五个
div
是红色，第六个
div
是绿色（应该是蓝色），第七个
div
是红色（应该是绿色），第9个
div
是绿色的（应该是红色的）。这对根本问题没有帮助。。。你看过前4项了吗？啊。。我现在明白了。它被冲洗了。@d'alar'cop你可以取消你的否决票。这和你的答案一样有效。@DevlshOne我对SO投了0票反对票-这在我看来很糟糕。所以。。。不是我。对不起，我会投票给你的，为什么不呢。Cheers@DevlshOne顺便说一句，这是一个不错的选择，对根本问题没有帮助。。。你看过前4项了吗？啊。。我现在明白了。它被冲洗了。@d'alar'cop你可以取消你的否决票。这和你的答案一样有效。@DevlshOne我对SO投了0票反对票-这在我看来很糟糕。所以。。。不是我。对不起，我会投票给你的，为什么不呢。Cheers@DevlshOne这是一个不错的选择way@user2670854没关系。我明白-一切顺利。@user2670854没关系。我明白-一切都好。