停止 Jquery nth-child 影响 sub-children

Question

请看下面我的代码。这是我面临的问题的简化版本：我想在第二段之后插入一些文本，但不在块引用中。目前，我的 jquery 使我的新文本出现在内容中的第二段和块引用中的第二段之后。

我知道 nth-child 是如何工作的，但还没有找到限制它走多远的方法。

谢谢。

<div class="content">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <blockquote>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
    </blockquote>
</div>

<script>
$( "<p><strong>I AM NEW TEXT</strong></p>" ).insertAfter( ".content p:nth-child(2)" );
</script>

Answer 1

将它与 child selector 一起使用到 select 只有直系子

.content p:nth-child(2) 使用后代关系，因此它将匹配 .content 元素内的所有第二个子元素（在所有级别）

$("<p><strong>I AM NEW TEXT</strong></p>").insertAfter(".content  > p:nth-child(2)");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <blockquote>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </blockquote>
</div>

Answer 2

将其替换为子选择器：

$( "<p><strong>I AM NEW TEXT</strong></p>" ).insertAfter( ".content > p:nth-child(2)" );

停止 Jquery nth-child 影响 sub-children

Stop Jquery nth-child affecting sub-children

javascript

jquery

jquery-selectors