Question

我有以下HTML：

<div id="article-content">
                <p>content of article</p>
                <h3 id="last-heading"></h3>

                <p>Content part 1 of last heading</p>
                <p>Content part 2 of last heading</p>
                <a href="http://www.google.co.in">Link</a>
                <div class="article-img"><img src="imgurl"/></div>...

        ..
        ..
        ..

            </div>

我希望将id为last last-heading的元素之间的内容添加到其父＃article-content的末尾，并将其包装到id为＃processed-content

的div中

预期输出：

<div id="article-content">
            <p>content of article</p>
            <h3 id="last-heading"></h3>
            <div id="processed-content">
            <p>Content part 1 of last heading</p>
            <p>Content part 2 of last heading</p>
            <a href="http://www.google.co.in">Link</a>
            <div class="article-img"><img src="imgurl"/></div>...

    ..
    ..
    ..
</div>
        </div>

如何使用jquery实现这一目标？

Answer 1

像这样使用，

$("#last-heading").nextAll().wrapAll("<div id='processed-content'></div>");

nextAll()将获取当前元素之后的所有兄弟姐妹。然后，您可以使用wrapAll()用特定元素包装元素

Fiddle

Answer 2

试

$("#processed-content").html($('#last-heading').nextUntil());

如果在处理内容中有任何值，请使用jquery中的附加

$("#processed-content").append($('#last-heading').nextUntil());

或者如果你没有使用像这样的dom使用的处理内容

$('#last-heading').nextUntil().wrapAll( "<div id='processed-content' />")

jQuery：获取子节点和父节点之间的内容并将其包装到div中

2 个答案:

DEMO