javascript - jQuery 选择器混淆

Question

我有以下代码..

<span class="under"> 
texthere
    <ul class="list">
        <li> list text here</li>
    </ul>
</span>

当我运行时，$(".under").text()我得到“这里的 textherelist 文本”。

我已经尝试过$(".under :not(.list)").text()并且被低估了。

我也没有得到正确的输出$(".under").not(".list").text()

所以我最后一次尝试是$(".list").parent().text()

这导致 textherelist 文本在这里

这么简单的事情我哪里错了？

ps 不必是 jQuery 可以是 JavaScript，如果它更简单的话。

想要的结果： texthere

score 3 · Accepted Answer

所以我猜你在看文字：texthere？

var elem = $(".under").clone(),
    text = $.trim(elem.children().remove().end().text());

克隆元素，删除所有子元素并获取剩余文本。</p>

score 2 · Accepted Answer

描述：获取匹配元素集中每个元素的组合文本内容，包括它们的后代。

所以是的，这种行为是意料之中的。

您可以尝试这样做以仅获取选择器的直接文本节点：

$('.under').contents().filter(function(){ return(this.nodeType == 3); }).text()

解释：

.contents()( docs ) 返回选择器的子节点，包括文本节点

描述：获取匹配元素集中每个元素的子元素，包括文本和注释节点。

.filter()接受回调以仅返回您需要的内容，基于此，您只接受带有nodeType == 3的内容，这是一个文本节点。

score 2 · Accepted Answer

干得好：

var text = $('.under').contents(':not(.list)').text();

3 回答 3