jQuery 获取除子元素 X 之外的子元素的 HTML

Posted 2023-03-07

【中文标题】jQuery 获取除子元素 X 之外的子元素的 HTML

【英文标题】：jQuery Get HTML of Children except Child Element X

【发布时间】：2016-03-18 01:59:31

【问题描述】：

如何使用jQuery/javascript 来选择第一个<div class="description 中两个<p> 元素的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>

【问题讨论】：

$(".description").eq(0).children().slice(1) 将为您提供实际的节点，而不是标签。为什么你也想要标签？

@thedarklord47 是的，我也想要标签

可能会有所帮助..jsfiddle.net/mohamedyousef1980/4ef5g3h1

@thedarklord47 我正在抓取网页并希望保留格式标记，例如 b i br。在原网页上，<p> 用于定义段落，没有<p> 文本将全部组合成一个大段落。

【参考方案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 docs：您需要这样做：

如果你想返回outerHTML你可以使用$.html(selector):

所以，在你的情况下，我会尝试：

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

【讨论】：

Cheerio 有“outerHTML”道具吗？我不认为它模拟了整个 DOM。

这会将选择器的 html 更改为 'p'

【参考方案2】：

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

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

【参考方案3】：

更新：

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

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

【讨论】：

和 Olivier 的回答一样，同样的问题。

outerHTML 是 DOM 元素的一个属性，不受外部 js api 的影响

这是服务器端的 JavaScript，而 Cheerio 有一个非常精简的 DOM

【参考方案4】：

您可以在 jQuery 中通过.prop("tagName") 使用更简洁的方法。