Question

我有以下代码

<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>

例如，请参阅this fiddle。

我在哪里错了？或者我应该使用.after()之外的其他内容来执行此操作吗？

Answer 1

您不能使用不平衡的HTML来更改DOM树。 jQuery需要提供一个平衡的HTML块，因为每次传入这样的HTML时，它都会创建一个独立的DOM树，而不仅仅是将HTML片段插入到源代码中。

您需要创建一个新的<div>来保存图片，另一个用来保存剩余的<p>元素，然后使用.append()移动多余的元素分为后者，例如：

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/

Answer 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>');

关闭父div添加内容然后再用jquery .after打开div

2 个答案: