0

私は以下のコードを持っています

<div>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</div>

このjqueryで

jQuery('p:nth-child(5)').after('</div><div><img src="http://dummyimage.com/100x100/fff/000"></div><div>');

私の出力はこれにしたいと思います。

<div>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    </div><div><img src="http://dummyimage.com/100x100/fff/000"></div><div>
    <p>some text</p>
    <p>some text</p>
</div>

代わりに私はこれを手に入れています。

<div>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p><div><img src="http://dummyimage.com/100x100/fff/000"></div><div></div>
    <p>some text</p>
    <p>some text</p>
</div>

たとえば、このフィドルを参照してください。

ここでどこが間違っているのですか？または、これを行うために.after（）以外のものを使用する必要がありますか？

4

2 に答える 2

4

不均衡なHTMLを使用して、そのようなDOMツリーを変更することはできません。jQueryでは、バランスの取れたHTMLブロックを提供する必要があります。これは、このようにHTMLを渡すたびに、HTMLスニペットをソースコードに挿入するだけでなく、分離されたDOMツリーが作成されるためです。

<div>画像を保持するために新しいものを作成し、残りの<p>要素を保持するために別のものを作成し.append()てから、余分な要素を最初のdivから後者に移動するために使用する必要があります。

var $d = $('div');
var $p = $('p:gt(4)');
if ($p.length) {
    $('<div>').insertAfter($d).append($p);
    $('<div><img src="..."></div>').insertAfter($d);
}

http://jsfiddle.net/alnitak/Z8LR3/を参照してください

于 2012-08-13T22:42:03.137 に答える
2

jQueryの.afterメソッドは、有効な自己完結型のHTML要素のみを受け取ることができます。

jQuery Docsから：

content: HTML string, DOM element, or jQuery object to insert after each element in the set of matched elements.

代わりに、必要なすべての要素を手動で転送する必要があります。.nextAll（）を使用してみてください

var elements = $('p:nth-child(5)').nextAll('p').detach();
var nextdiv = $("<div></div>).append(elements);
$('.parentDiv').after(nextdiv);
$('.parentDiv').after('<div><img src="http://dummyimage.com/100x100/fff/000"></div>');
于 2012-08-13T22:43:45.400 に答える