jQuery获取子元素的HTML，但排除特定的子元素X

Question

如何使用jQuery / Javascript选择第一个

中两个

元素的HTML？正则表达式也可以。这个jQuery选择实际上是在Node.js上的cheerio对象中完成的。

使用：

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

似乎只获取文本

Foo Bar

取代

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

- Nyxynyx

---

$(".description").eq(0).children().slice(1)会获取到实际的节点，但不包括标签。为什么你还想要标签呢？ - thedarklord47

@thedarklord47 是的，我也想要标签。 - Nyxynyx

可能会有帮助.. http://jsfiddle.net/mohamedyousef1980/4ef5g3h1/ - Mohamed-Yousef

@thedarklord47 我正在爬取一个网页，并希望保留格式标签，如 b i br。在原始网页中，<p> 用于定义段落，如果没有 <p>，文本将合并成一个大段落。 - Nyxynyx

Answer 1

如果你对jQuery语句进行分解，你会得到以下结果：

$('.description')[0]

将返回第一个 <div> 节点。

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

将返回该<div>节点的所有子节点的数组，因此这是一个包含三个节点（一个<h2>和两个<p>）的数组。

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

将返回与上述相同的数组，但不包括 <h2> 标签。

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

将应用.html()到这些节点中的每一个，即提取节点内部的所有HTML。在<p>Foo</p>中，内部是Foo。

这就是您要寻找的内容：

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

更新：基于Cheerio文档：您需要执行以下操作：

如果您想返回outerHTML，则可以使用$.html(selector)：

所以，在您的情况下，我会尝试使用以下代码：

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

- Olivier De Meulder

---

Cheerio有"outerHTML"属性吗？我认为它并没有模拟整个DOM。 - Jack Guy

这将会改变选择器的HTML为“p”。 - DinoMyte

Answer 2

您可以创建一个重复的元素并删除您不需要的所有内容，或者如果您不需要以后访问h2，则可以在原始元素上进行操作。

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

- Jack Guy

Answer 3

更新：

根据文档，您可以尝试以下操作：

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

- DinoMyte

---

和Olivier的回答一样，同一个问题。 - Jack Guy

outerHTML是DOM元素的属性，不受外部js api的影响。 - DinoMyte

这是服务器端的JavaScript，Cheerio具有非常简化的DOM。 - Jack Guy

Answer 4

在jQuery中，您可以使用.prop("tagName")来更简洁地处理。

- anshulix