How can jQuery/Javascript be used to select the HTML of the two <p> elements in the first <div class="description? Regex is fine too. This jQuery selection is actually done within Node.js on a cheerio object.

Using

$( $('.description')[0] ).children().not('h2').html()

seems to only grab the text

Foo Bar

instead of

<p>Foo</p> 
<p>Bar</p>

HTML:

<div class='description'>
  <h2>Hello world</h2>
  <p>Foo</p>
  <p>Bar</p>
</div>

<div class='description'>
  <h2>Goodbye world</h2>
  <p>Didi</p>
  <p>Deedee</p>
</div>

How can jQuery/Javascript be used to select the HTML of the two <p> elements in the first <div class="description? Regex is fine too. This jQuery selection is actually done within Node.js on a cheerio object.

Using

$( $('.description')[0] ).children().not('h2').html()

seems to only grab the text

Foo Bar

instead of

<p>Foo</p> 
<p>Bar</p>

HTML:

<div class='description'>
  <h2>Hello world</h2>
  <p>Foo</p>
  <p>Bar</p>
</div>

<div class='description'>
  <h2>Goodbye world</h2>
  <p>Didi</p>
  <p>Deedee</p>
</div>

• javascript
• jquery
• html
• node.js
• cheerio

• $(".description").eq(0).children().slice(1) will get you the actual nodes but not the tags. Why do you want the tags too? – thedarklord47 Commented Dec 12, 2015 at 3:00
• @thedarklord47 Yes I want the tags too – Nyxynyx Commented Dec 12, 2015 at 3:01
• 1 may help ..jsfiddle/mohamedyousef1980/4ef5g3h1 – Mohamed-Yousef Commented Dec 12, 2015 at 3:03
• @thedarklord47 I'm scraping a webpage and want to keep the formatting tags such as b i br. On the original webpage, <p> is used to define paragraphs, without the <p> the text will all bine into a large paragraph. – Nyxynyx Commented Dec 12, 2015 at 3:04

4 Answers 4

If you deconstruct your jQuery statement, you get the following:

$('.description')[0]

will return your first that first <div> node.

$( $('.description')[0] ).children()

will return an array of all the children of that <div> node, so that's an array with three nodes, an <h2> and two <p>.

$( $('.description')[0] ).children().not('h2')

will return the same array as above, minus the <h2>.

$( $('.description')[0] ).children().not('h2').html()

will apply .html() to each of these nodes, i.e. extract all of the html inside the node. And inside <p>Foo</p> is Foo.

This is what you're looking for:

$( $('.description')[0] ).children().not('h2').prop('outerHTML')

Update: based on the Cheerio docs: you would need to do this:

If you want to return the outerHTML you can use $.html(selector):

So, in your case, I would try:

$( $('.description')[0] ).children().not('h2').html('p')

You can create a duplicate element and remove everything you don't want, or do it on your original if you don't need to access the h2 later.

var dup = $(".description").clone();
dup.children("h2").remove();
var out = dup.html();

Update :

As per the documentation, you may try the following :

$.html($('.description:first').children(':not(h2)'));

You can use a neater approach by .prop("tagName") in jQuery.