Select 一个元素但不是其子元素使用 jquery

Question

我正在尝试更改 DIV 内所有 <p> 元素的一些内容，但我不希望 <a> 标签或嵌套在 [=] 内的任何其他元素13=] 元素被 selected。这可行吗？

<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>

我尝试了以下但没有成功：

var bodytext = $( '.main-div p').not('p > a') ; //this selects the <a> tag as well
var bodytext = $( '.site-inner p:visible').not('p:has(a)') ; //这不会 select 两个
因为它们都有标签。

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

提前致谢。

Answer 1

您无法使用 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>

Select 一个元素但不是其子元素使用 jquery

Select an element but not its child element using jquery

css

jquery

dom

jquery-selectors