使用 jquery 选择一个元素而不是它的子元素

如何解决使用 jquery 选择一个元素而不是它的子元素

我试图更改 DIV 内所有 <p> 元素中的一些内容，但我不希望 <a> 标记或嵌套在 <p> 元素中的任何其他元素成为被选中。这可行吗？

<div .main-div>
   <p> Select this sentence.......
      <a> Don't select this </a>
   </p>
   <p> Select this too....
      <a> Don't select this </a>
   </p>
</div>

我尝试了以下但没有奏效：

1. var bodytext = $( '.main-div p').not('p > a') ; //this selects the <a> tag as well
2. var bodytext = $( '.site-inner p:visible').not('p:has(a)') ; //这不会同时选择

   ，因为它们都有标签。

如果有人能给我建议，我将不胜感激。

提前致谢。

解决方法

您无法直接使用 jQuery 访问文本节点。但是，您可以访问 jQuery 对象包含的底层元素的节点

$('.main-div p').each(function(i){
   const firstSentence = this.childNodes[0];
   firstSentence.textContent = 'Change #' +(i+1)  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
   <p> Select this sentence.......
      <a> Don't select this </a>
   </p>
   <p> Select this too....
      <a> Don't select this </a>
   </p>
</div>