jQuery 选择器混淆答案

【问题标题】：jQuery Selector ConfusionjQuery 选择器混淆
【发布时间】：2012-08-23 16:25:20
【问题描述】：

我有以下代码..

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

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

附言不一定非要 jQuery 可以是 JavaScript，如果它更简单的话。

想要的结果：texthere

【问题讨论】：

【解决方案1】：

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

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

克隆元素，移除所有子元素并获取剩余文本。

【讨论】：

【解决方案2】：

来自docs：

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

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

你可以试试这个来只获取选择器的直接文本节点：

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

解释：

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

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

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

【讨论】：

【解决方案3】：

给你：

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

【讨论】：