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>

div1つ目は赤、2 つ目は青、3 つ目は緑、4 つ目は黄色、次に赤、青、緑、黄色などの境界線が下部にあることを期待して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 の 3 番目のインスタンスを上書きすることは言うまでもありません。

于 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 に答える