Проблема с jQuery содержит метод выбора элемента div и span

Question

У меня проблема с выбором div / span элементов с помощью метода jQuery 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> s не может вкладываться.Точно так же <li> не может существовать непосредственно внутри другого <li> - он может существовать только как дочерний элемент <ul> (или <ol>), поэтому <li> <li> cool </li> </li> интерпретируется как <li> </li><li> cool </li>.

С другой стороны, <span> s и <div> s могут быть вложенными друг в друга, поэтому они появляются в документе так же, как написан ваш 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 внутри один <p> (остальные <p> пустые)
• <ul><li> </li><li> cool </li> </ul> - cool вложенныйвнутри один <li> (остальные <li> с пустыми)
• <div> <div> cool </div> </div> - cool вложенные внутри 2 <div> с

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>