2

私はたくさんの div を持っています。それらはすべて画像を含む PHP 経由で出力されています。4 番目の div の後に注入したい 1 つの div がありますが、これを達成するのに問題があります。画像/divをグリッド化するためにIsotopeを使用しています。

私のjQueryの例:

$('.each-brewery-image:nth-child(4n)').after('<div>Test</div>');

私のHTMLの例：

<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="01.jpg" />
   </span>
   </a>
</div>
<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="02.jpg" />
   </span>
   </a>
</div>
<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="03.jpg" />
   </span>
   </a>
</div>
4

2 に答える 2

3

:nth-child(4n)5 番目、9 番目、13 番目などの要素を選択します。あなたはおそらく欲しい:eq()：

$('.each-brewery-image:eq(3)').after('<div>Test</div>');

:eq()最初のアイテム、2 番目のアイテムなど:nth-child()、0 でインデックス付けされます。:eq(0):eq(1)

于 2013-01-31T23:39:27.783 に答える
2

nth-child(4n)を使用して、既存のコードが機能するはずです。

デモ- nth-child(4n) で動作する元のコード

ただし、4 番目の要素の後にのみ新しい div を追加することが期待される場合は、代わりにeq(3)を使用する必要があります。そうしないと、予期しない結果が生じる可能性があります。

eq()に基づいているため、最初の要素など0に使用する必要があります。eq(0)したがって、4 番目は になりますeq(3)。

デモ- を使用して 4 番目の画像の後にテスト div を挿入しますeq(3)

あなたのコメントによると、eq()うまくいかなかったようです：

残念ながら、これはうまくいきませんでした。PHPが最初にアイテムを生成することに関係しているのでしょうか？

一般に、次のように、DOM の準備が整った後にのみコードが実行されるように、コードをドキュメント対応関数にラップしてみてください。

$(document).ready(function(){
    $('.each-brewery-image:eq(3)').after('<div>Test</div>');
});

DOM が他のアクションによってロードされた後にコードが HTML を挿入している場合は、要素が DOM にある目的のコードを実行して、変更を適用する必要があります。

なぜ機能するように見えるeq(3)場合に使用するnth-child(4)/nth-child(4n)のですか?

一般的な完全性のために、このセクションを追加すると、この質問に出くわした将来のユーザーがnth-child().

Usingは、最後の要素が呼び出される前のセレクターのすべてのnth-child()要素に 一致します。nth-child()

nth-child(x) - 使用しないn

たとえば、それぞれul複数の 2 がある場合、両方の の2 番目の要素が選択されます。と同じです。li$('ul li:nth-child(2)') ul$('li:eq(1)', 'ul')

DEMO - DEMOulを使用してそれぞれの 2 番目の要素を選択 -を使用して上記と同じ結果$('ul li:nth-child(2)')
$('li:eq(1)', 'ul')

nth-child(xn) - 使用n

$('ul li:nth-child(2n)')一方、を使用すると、両方のsで毎秒一致します。それはカウンターのように使われるからです。liuln

デモul-を使用して、それぞれの要素を 1 つおきに選択$('ul li:nth-child(2n)')

于 2013-01-31T23:40:17.573 に答える