嵌套<p>的jQuery选择器

Question

谁知道为什么这行不通:

$( "p  p" ).each(function() {
    $(this).css("color", "green");
});

和"p> p"，或任何嵌套段落元素。虽然div和其他元素

是可以的

检查这个，例如:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  alert('length='+$('p p').length); // 0
</script>
<div style="border:1px solid;">
  <p>The first paragraph in  div.</p>
  <p>The second paragraph in div (and the 2nd child in this div).</p>
  <p>
    <span>Span within p (WILL BE fount as "p > span")</span>
    <p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p > span")</span>
    <p>P within p (2).</p>
  </p>
</div>
<p>
    <span>Span within p (WILL BE fount as "p > span")</span>
    <p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p > span")</span>

Answer 1

如果你去检查在调试工具中呈现的html，你会发现，没有你的<p>元素，你嵌套的不再嵌套了。它们被呈现为单独的元素。因此，如果html呈现并且您要使用$('p p')或$('p>p')操作DOM，则不存在具有上述指定表达式语法或DOM操作的元素。

<div style="border:1px solid;">
  <p>The first paragraph in  div.</p>
  <p>The second paragraph in div (and the 2nd child in this div).</p>
  <p>
    <span>Span within p (WILL BE fount as "p &gt; span")</span>
    </p><p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p &gt; span")</span>
    <p>P within p (2).</p>
  <p></p>
</div>
<p>
    <span>Span within p (WILL BE fount as "p &gt; span")</span>
    </p><p>P within p (1).</p> 
    <span>Span within p (will NOT be fount as "p &gt; span")</span>

正如@Ish和@j08691所提到的，<p>标记不能嵌套，在浏览器的调试工具的帮助下，您可以在浏览器中清楚地看到。更多参考，请查看另一个SO答案

Answer 2

只需将p标签更改为SPAN，它就可以工作了:

jQuery("span").find('span').each(function() {
    jQuery(this).css("color", "green");
});

这里是工作演示https://jsfiddle.net/0gqL9q3c/