用它计算子元素和文本 jQuery

Question

我想计算p标签内的总元素和文本

<p class="parent">
<span class="child">Span Text</span> 
Text Text Text
</p>

可能吗？

$(p).children(').length

我正在使用这段代码，这只给了我 1，但我想要计数 2。

Answer 1

您正在寻找子节点，而不是子节点(在此处阅读有关差异的更多信息(。

但是，请注意，HTML 代码中子节点的实际数量为 3，因为有一个文本节点保存跨度之前的空格。

在此示例中，您可以查看在跨度之前有或没有空格的子节点的计数。

const parent1ChildNodes = document.querySelector('.parent1').childNodes.length
const parent2ChildNodes = document.querySelector('.parent2').childNodes.length
console.log(parent1ChildNodes)
console.log(parent2ChildNodes)

<p class="parent1">
<span class="child">Span Text</span> 
Text Text Text
</p>
<p class="parent2"><span class="child">Span Text</span> 
Text Text Text
</p>

Answer 2

children 方法仅返回有效对象。"文本文本文本"不是 html 对象。因此不算数。如果将其放在另一个跨度中，则子项的长度变为 2。

<p class="parent">
<span class="child">Span Text</span> 
<span>Text Text Text</span>
</p>

Answer 3

您需要使用内容而不是children来计算文本节点。请注意，contents还将计算注释节点。

$(p).contents().length