javascript - CSS nth-of-type 未按顺序选择

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 为蓝色，第三个为绿色，第四个为黄色，然后是红色、蓝色，绿色、黄色等，但效果不太好。这是一个 fiddle :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后，第四项也被设置...然后4n将覆盖它，自然它无法正常工作。更不用说 1n 将设置它们全部，并且 3n 将设置项目 3 和 6，这将覆盖 2n 的第三个实例。