title: Problem with jQuery contains method selecting div and span element
body: <p>I have problem facing selecting <code>div</code>/<code>span</code> elements via jQuery <code>contains(arg)</code> method. I want to count the total number of elements that contain specific text. But it is giving different results to different HTML elelemts. See the code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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)
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Span -&lt;span id="co"&gt; &lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  Div -&lt;span id="co1"&gt; &lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  Li -&lt;span id="co2"&gt; &lt;/span&gt;
  &lt;div&gt;&lt;/div&gt;
  p -&lt;span id="co3"&gt; &lt;/span&gt;
  &lt;br&gt;&lt;br&gt;
  
  &lt;div&gt; &lt;div&gt; cool &lt;/div&gt; &lt;/div&gt;
  &lt;p&gt; &lt;p&gt; cool &lt;/p&gt; &lt;/p&gt;
  &lt;ul&gt;&lt;li&gt; &lt;li&gt; cool &lt;/li&gt; &lt;/li&gt;&lt;/ul&gt;
  &lt;span&gt; &lt;span&gt; cool &lt;/span&gt; &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above code outputs result </p>
  
  <pre><code>Span -2
  Div -2
  Li -1 
  p -1 
  </code></pre>
  
  <p>I just don't understand WHY, while every element should have same count. </p>