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

Question

我在通过 jQuery contains(arg) 方法选择 div/span 元素时遇到问题。我想计算包含特定文本的元素总数。但它对不同的 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>不能嵌套。同样，一个 <li>不能直接存在于另一个内部 <li> - 它可能仅作为 <ul> 的子项存在(或 <ol> )，所以 <li> <li> cool </li> </li>被解释为 <li> </li><li> cool </li> .

另一方面，<span> s 和 <div> 可以相互嵌套，因此它们出现在文档中的方式与编写 HTML 的方式相同。

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嵌套在 2 <span> 内小号
• <p> </p><p> cool </p> <p></p> - 一个 cool嵌套在 one 中 <p> (其他 <p> 为空)
• <ul><li> </li><li> cool </li> </ul> - 一个 cool嵌套在 one 中 <li> (其他 <li> 为空)
• <div> <div> cool </div> </div> - 一个 cool嵌套在 2 <div> 内小号