jQueryを使って "n"要素の後に何かを追加する

Question

<div id="holder"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div> 

のようなマークアップの場合、2番目のDIVの後にマークアップを追加するにはどうすればよいですか？

ありがとう、
titel

Answer 1

がCSS selector :nth-child()をお試しください：

$("#holder > div:nth-child(2)").after("<div>foobar</div>"); 

もjQuery page of the :nth-child() selector上の例を参照してください。

Answer 2

$("#holder div:eq(1)")は、#holder divの2番目の子divを選択します。 （:eq() selector info）。次に、.after()関数を使用してコンテンツを追加します。

Answer 3

使用insertAfter（セレクタ）

http://docs.jquery.com/Manipulation/insertAfter

Answer 4

append(content)又はafter(content)機能と組み合わせて:eq(index)又は:nth-child(index/even/odd/equation)セレクタを使用します。例えば

、このコードを仮定：n番目の子が役立つことができます：

<div id="holder"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div>

この

$("#holder>div:eq(1)").append("<div>inserted div</div>");

のように追加したり、この

$("#holder>div:eq(1)").after("<div>inserted div</div>");

のように後に使用している間、この

$("#holder>div:nth-child(2)").append("<div>inserted div</div>");

はあなたに

<div id="holder"> 
    <div>div 1</div> 
    <div>div 2<div>inserted div</div></div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div>

を与えるだろうか、この

$("#holder>div:nth-child(2)").after("<div>inserted div</div>");

を使用して、あなたに

<div id="holder"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>inserted div</div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div>

を与える使用してn個の要素ごとにコンテンツを設定することができます。 EQ

<div id="holder"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>inserted div</div> 
    <div>div 3</div> 
    <div>div 4</div> 
    <div>inserted div</div> 
</div>

Answer 5

使用この

$("ul li:nth-child(4n)").add('ul li:last').after("<div style='clear:both;'>&nbsp;</div>"); 

Answer 6

それを試してみてくださいにあなたを与えるだろう

$("#holder>div:nth-child(2n)").after("<div>inserted div</div>");

を使用して、例えば0

開始時刻： も、のインデックス：インデックスは一方でn番目の子は1から始まりこのように：

$("#holder > div:nth-child(2n)").after("<div>insert here</div>"); 

それは、すべての2行目の後に<div>insert here</div>を挿入します。

$("#holder > div:nth-child(2)").after("<div>insert here</div>");