如何在不使用children（）的情况下从选择中排除子元素内的元素？

Question

我有一个像这样的元素：

<div id="foo">
  <a href="#" class="some">click me</a>
  <div id="bar">
     <a href="#" class="some">click me too</a>
  </div>
</div>

我需要选择不在a内的bar元素。问题是我无法使用children()，因为我的foo比上面复杂得多。

问题：
有没有办法从foo中选择“某些”元素并明确排除bar中的“某些”元素？

Answer 1

如果锚元素可能并非始终是foo的直接子项，则可以使用filter()方法。

var anchors = $("#foo a").filter(function(){
    return !$("#bar").find(this).length;
});

工作示例 http://jsfiddle.net/v63tC/

Answer 2

您可以使用.filter()和$.contains()来解决此问题

var $bar = $('#bar');
var items = $('#foo a.some').filter(function() {
    return !$.contains($bar[0], this)
})

演示：Fiddle

Answer 3

可以使用>直接子符号：

$('#foo > a')

您可以使用.not()省略某些元素：

$("#foo a").not('#bar a').length;

Fiddle

Answer 4

由于您提到您的#foo元素比示例复杂得多，因此可以安全地假设它不仅仅是您需要选择的直接后代吗？如果是这种情况，我建议如下：

$('#foo a.some').filter(function() {
    return $(this).parents('#bar').length === 0;
});

选择 <a>内的所有 #foo元素，然后将其过滤掉，以便只有那些没有id的祖先的保留bar。

Answer 5

您可以这样做（假设变量foo是您的#foo）

var a = foo.find('> a');

Answer 6

您可以使用child selectors完成第一项任务（从<a>获取所有foo元素）：

$('#foo > a'). ...