Question

我正在寻找一种方法来选择包含某个元素的元素，然后过滤结果以获得最高级别。很难解释，但通过一个例子变得更容易：

<div id="one">
    <div id="two">
        <div id="three" class="find-me"></div>
    </div>
</div>
<div id="four">
    <div id="five" class="find-me"></div>
</div>

在这种情况下，我希望我的设置包含#one和#four。如果我尝试做这样的事情：

var elements = $('div').has('.find-me');

我得到了元素＃one，＃two和#four。

注意：“最高级别”与第一个选择器中最顶层的元素相关，在这种情况下为$('div')。

Answer 1

highest level的定义是有点含糊不清，因为在实践中，如果页面中有.find-me，则最高级别的父级将为html标记！这是没用的。

通过更具体地定义您的问题，您可以为此highest-definition提供更明确的定义，例如说the farthest div parent et。并且为了遍历元素的父元素，您可以使用.parents()和.closest()方法。

var farthestDiv = $(".find-me").parents("div").last();

很明显，如果您有find-me次出现多次，则需要在.each()循环中运行此操作。

在此处查看示例：http://jsfiddle.net/GsQDb/3/

Answer 2

假设通过“顶级”，你的意思是身体标签的直接后代，你可以使用这一个衬里。它找到具有.find-me类的所有对象，然后在父项中搜索作为body标记后代的标记（将是顶层）。

$(".find-me").parents("body > *")

您可以在此处查看：http://jsfiddle.net/jfriend00/9LF6u/

这有以下优点：

任何类型的标记都可以是顶级标记（不仅仅是div）
它应该是更快的方法之一，因为它找到了.find-me个对象（这将是大多数浏览器内部通过getElementsByClassName进行的快速操作）并且只是走向它们的父层次结构。
它会自动处理重复项，因此给定的顶级项目永远不会列出多次。
如果您想要更改顶级的定义（例如，更改为容器对象），您只需更改传递给.parents(selector)方法的选择器即可反映该更改。

Answer 3

使用过滤器过滤掉第一个选择器后所需的元素。例如：

var elements = $('div.find-me').filter(function(idx){ 
    return !$(this).parents('div.find-me').length;
});

Answer 4

这将做你想要的，它将首先找到元素，然后找到那些元素的最高元素，并创建找到的最高元素的jQuery对象。

var elements = $('div.find-me'), highest = [];

elements.each( function(){
var parent = this, body = document.body;

    while( parent && parent.parentNode !== body ) {
    parent = parent.parentNode;
    }

    if( $.inArray( parent, highest ) < 0 ) {
    highest.push( parent );
    }
});

highest = jQuery( highest );

的jsfiddle：

http://jsfiddle.net/D3jC8/2/

Answer 5

如果您将它们全部放在一个大容器div中，您可以使用：

$('.container div.find-me').parents($('.container').children());

那应该有效，虽然我现在没有机会测试它。

如果没有，请告诉我，因为还有更复杂的解决方案。

Answer 6

你能为最顶级的div分配课程吗？如果是这样，你可以这样做：

var elements = $("div.topMost").has(".find-me");

Answer 7

$(".find-me").map(function() {
  return $(this).parents("div").last().get();
});

jQuery：包含x的最高级别元素

7 个答案: