I have a div in the following structure
<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>
I want the following html content in output:
<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>...
..
..
..
ie. the html content after div with id last-heading until.
How to achieve this using jQuery
Please note: the content is dynamic. Only reference we have is id :last-heading and we have to find complete html content from that id till end of its parent.
Try to select the relevant element and use outerHTML property of it,
$('#article-content > p').slice(-2).map(function () {
return this.outerHTML;
}).get().join('')
Or if you want to select the paragraph elements particularly after one element, then use,
$('#last-heading ~ p').map(function () {
return this.outerHTML;
}).get().join('');
As per your new requirement, you can use tilde followed by nothing selector.
$('#last-heading ~').map(function () {
return this.outerHTML;
}).get().join('');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments