どうしてこのようになっていますか？

Question

http://jsfiddle.net/DerekL/whY4B/

$("p").each(function(i) { 
    var btn = $('<button>button</button>'), 
     span = $('<span>span</span>'); 
    $(this).after(btn).after(span); 
});​ 

だからここに私はHTMLで<p>秒を持っていると私はボタンを作成する.after()を使用してまたがる：

$(this).after(btn).after(span); 

btnが最初に来る、とspanが最後になります。しかし、その結果は逆です：btnが最後に来て、spanが最初に来ます。

何ですか？どのようにそれはそれのようになり、それは非常に混乱しています。助けてください。

Answer 1

.after() methodは、パラメータとして渡された要素を、それを呼び出す要素の直後に挿入します。だからあなたのコードでは、最初の.after()は<p>のすぐ後に続くようにbtnを挿入し、2番目の呼び出しは<p>の直後になるようにspanを挿入します。

明らかに、これは逆の順序で追加することです。結果はとなること

注：

<p>your para content</p> 
<button>button</button> 
<span>span</span> 

つまり、新しい要素が本当にあなたの段落の子としてなく後に追加されます。

を：あなたは.append()を使用している場合、それはあなたが各段落にまったく同じ内容を追加している場合、これはあまりにもそれを行いますので、あなたが.each()を必要としないことも、子供のように

$(this).append(btn).append(span); 

// will give you 

<p>your original para content 
    <button>button</button> 
    <span>span</span> 
</p> 

// (indenting added just for clarity) 

注意をそれらを追加します

var ele = $('<button>button</button>'), 
    span = $('<span>span</span>'); 

$("p").after(span).after(ele); 

http://jsfiddle.net/nnnnnn/whY4B/7/

Answer 2

afterがあなたのコンテンツを挿入しますが、元の要素を返し、段落ので、それはそのようなものです。つまり、あなたのコードは「pの後にこのボタンを挿入して」「pの後にこのスパンを挿入する」（これはボタンの前にあることもあります）です。 、あなたが望む結果を得るafterに両方のアイテムを渡すには

：

$(this).after(btn,span);