Question

我在以下结构中有一个div

    <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="http://cdn4.mos.techradar.futurecdn.net//art/Watches/Samsung/GearLive/Review/samsung-gear-live-watch-review-623-80.jpg"/></div>...

..
..
..
    </div>

我想在输出中输入以下html内容：

 <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="http://cdn4.mos.techradar.futurecdn.net//art/Watches/Samsung/GearLive/Review/samsung-gear-live-watch-review-623-80.jpg"/></div>...

..
..
..

即。 div之后的html内容，id为last-heading，直到如何使用jQuery实现这一点 请注意：内容是动态的。我们唯一的引用是id：last-heading，我们必须找到从该id到其父级结尾的完整html内容。

Answer 1

尝试选择相关元素并使用它的outerHTML属性

$('#article-content > p').slice(-2).map(function () {
    return this.outerHTML;
}).get().join('')

DEMO

或者如果你想特别在一个元素之后选择段落元素，那么使用

$('#last-heading ~ p').map(function () {
    return this.outerHTML;
}).get().join('');

DEMO

根据您的新要求，您可以使用tilde followed by nothing选择器。

$('#last-heading ~').map(function () {
    return this.outerHTML;
}).get().join('');

DEMO

Answer 2

在jquery中使用map

$("#article-content").find("p:gt(0)").map(function () {
    return  return this.outerHTML;
}).get();

作为您的新要求

$('#last-heading').nextUntil().map(function () {
    return  return this.outerHTML;
}).get();

DEMO

Answer 3

你也可以使用.nextAll()，因为：

var allP = $('#last-heading').nextAll().map(function() {
    return this.outerHTML;
}).get().join(); //comma separated
console.log(allP);

演示:: jsFiddle

jquery：获取子节点和父节点之间的html内容

3 个答案:

DEMO

DEMO

DEMO

DEMO