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 时，它都会创建一个分离的 DOM 树，而不仅仅是将 HTML 片段插入到源代码中。

您需要创建一个新<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 文档：

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