jQuery - 只获取没有子元素的父元素文本

Question

我正在抓取一个网页，我要查找的文本位于包含另一个 span 的 span 中

<div class="someParentDiv">
  <span>this is the text I want   
    <span class="childSpanClass">I don't want this text</span>
  </span>
</div>

我正在尝试使用 jQuery 选择来获取我想要的文本，但是当我使用 text() 获取元素的文本时，我也会得到我不想要的子跨度的文本。

我设法只得到我想要的文字

$('div.someParentDiv span').remove('.childSpanClass')

但这对我来说似乎有点倒退（see example），我想知道是否有更好、更好的方法来做到这一点。 有什么想法吗？

Answer 1

不使用 JQuery：选择 div.someParentDiv 中 span 元素的第一个子元素的 textContent。第一个子节点是该跨度的TEXT_NODE（参见MDN），它是一个（不可见的）独立节点。使用 JQuery 使用 $('.someParentDiv span').contents().first('[nodeType=3]').text();

var res = document.querySelector('#result');

// no jquery
res.innerHTML = 'DOM: ' + 
                 document.querySelector('.someParentDiv span').firstChild.textContent;

// jquery

res.innerHTML += '<br>JQuery: ' +  
                 $('.someParentDiv span').contents().first('[nodeType=3]').text();

#result {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someParentDiv">
  <span>this is the text I want   
    <span class="childSpanClass">I don't want this text</span>
  </span>
</div>

<div id="result"></div>

Answer 2

类似的问题：

jQuery get .text() but not the text in span

NodeType 解释

http://code.stephenmorley.org/javascript/dom-nodetype-constants/

Answer 3

您可以通过循环所有contents 来过滤掉所有非纯文本：

var node = $('.someParentDiv > span').contents().filter(function() {
    return this.nodeType == 3; // text node
});

alert(node.text());