在jQuery中选择元素时忽略子元素

Question

这是我的HTML：

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    SELECT THIS
</div>

我正在试图弄清楚如何选择foo内的所有内容，而不是ignore_this内的内容：

$("div.foo:not(span.ignore_this)").text()

但我无法弄清楚如何。

Answer 1

选择器div.foo:not(span.ignore_this)说“匹配每个div.foo不是span.ignore_this”，它只会选择一个元素：div.foo。如果您重新构建了这样的html：

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    <span>SELECT THIS</span>
</div>

然后你可以打电话：

$('div.foo span:not(.ignore_this)').text();

哪个span元素是div.foo的后代，而不是.ignore_this。

如果您没有重新格式化html的奢侈品，那么您可以通过额外的处理器周期完成您想要的任务：

var clone = $('div.foo').clone();
$('span.ignore_this', clone).remove();
var text = clone.text();