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

Question

我在通过jQuery div方法选择span / contains(arg)元素时遇到问题。我想计算包含特定文本的元素总数。但这给不同的HTML元素不同的结果。请参见下面的代码。

$(document).ready(function(){
	
  $("#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 -<span id="co"> </span>
<div></div>
Div -<span id="co1"> </span>
<div></div>
Li -<span id="co2"> </span>
<div></div>
p -<span id="co3"> </span>
<br><br>

<div> <div> cool </div> </div>
<p> <p> cool </p> </p>
<ul><li> <li> cool </li> </li></ul>
<span> <span> cool </span> </span>

上面的代码输出结果

Span -2
Div -2
Li -1 
p -1 

我只是不明白为什么，而每个元素都应该有相同的计数。

Answer 1

要了解原因，请查看渲染的HTML 。当您将<p>放在另一个未封闭的<p>中时，浏览器将要结束先前的<p>并开始新的<p>，因为{{1} }不能嵌套。同样，<li>不能直接存在于另一个<li>内部-它只能作为<ul>（或<ol>）的子元素存在，因此<li> <li> cool </li> </li>被解释为<li> </li><li> cool </li>。

另一方面，<span>和<div>的 可以彼此嵌套，因此它们在文档中的显示方式与您编写HTML的方式相同。 / p>

console.log(document.body.innerHTML);

<div> <div> cool </div> </div>
<p> <p> cool </p> </p>
<ul><li> <li> cool </li> </li></ul>
<span> <span> cool </span> </span>

因此，呈现的文档具有：

• <span> <span> cool </span> </span>-一个cool嵌套在两个<span> s内
• <p> </p><p> cool </p> <p></p>-一个cool嵌套在一个 <p>（其他<p>个为空）
• <ul><li> </li><li> cool </li> </ul>-一个cool嵌套在一个 <li>（其他<li>个为空）
• <div> <div> cool </div> </div>-一个cool嵌套在两个<div> s内

Answer 2

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

例如，<p> <p> cool </p> </p>在渲染期间产生以下内容：

在上面，您可以看到确实只有一个<p>元素包含cool，从而产生了一个匹配项。

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

$(document).ready(function() {
  $("#co").text($("span:contains('cool')").length)
  $("#co1").text($("div:contains('cool')").length)
  $("#co2").text($("li:contains('cool')").length)
  $("#co3").text($("p:contains('cool')").length)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Span -<span id="co"> </span>
<div></div>
Div -<span id="co1"> </span>
<div></div>
Li -<span id="co2"> </span>
<div></div>
p -<span id="co3"> </span>
<br><br>

<div>
  <div>cool</div>
</div>
<p>cool</p>
<ul>
  <li>cool</li>
</ul>
<span>cool</span>