Javascript jQuery包含选择div和span元素的方法的问题

我在通过jQuery

contains（arg）

方法选择

div

/

span

元素时遇到问题。我想计算包含特定文本的元素总数。但是它给不同的HTML元素带来了不同的结果。请参阅下面的代码

$（文档）.ready（函数（）{
$（“#co”）.text（$（$（$（“span:contains（'cool'））））.length）
$（“#co1”）.text（$（$（“div:contains（'cool'）））.length）
$（“#co2”）.text（$（$（“li:contains（'cool'）））.length）
$（“#co3”）.text（$（$（“p:contains（'cool'）））.length）
});
Span-
分区-
Li-
p-



酷
酷

酷

酷
要了解原因，请查看呈现的HTML。当一个
在另一个未关闭的
中时，浏览器会显示您想要结束以前的
并启动新的
的内容，因为
无法嵌套。类似地，一个
不能直接存在于另一个
-它可能只作为
（或
）的子代存在，因此
被解释为

另一方面，
s和
s可以相互嵌套，因此它们在文档中的显示方式与编写HTML的方式相同


console.log（document.body.innerHTML）
酷
酷

酷

酷
jQuery输出每个元素意外计数的原因是HTML无效。当您的HTML无效时，浏览器会自动尝试为您更正它，方法是移动/删除它知道无效的部分。如果您查看DOM，您会发现有几个元素不存在

例如，
cool
在渲染期间会产生以下结果：


在上面，您可以看到，实际上，只有一个
元素包含
cool
，这导致了一个匹配

修复无效的HTML还会显示正确的结果：


$（文档）.ready（函数（）{
$（“#co”）.text（$（$（$（“span:contains（'cool'））））.length）
$（“#co1”）.text（$（$（“div:contains（'cool'）））.length）
$（“#co2”）.text（$（$（“li:contains（'cool'）））.length）
$（“#co3”）.text（$（$（“p:contains（'cool'）））.length）
});

跨度
分区-
Li-
p-



凉爽的
酷


酷

酷
HTML的某些部分无效。例如，你不能嵌套
或
元素谢谢，我有另一个查询。像DIV
这样的元素很酷谢谢，我有另一个查询。像DIV
这样的元素很酷不，你有两个
DIV
的
文本内容
包含
酷
。如果您只希望最里面的元素有这样一个文本节点，我会根据包含您要查找的文本的元素进行筛选，然后映射到它们的父元素。