Question

我有一个HTML结构，其中包含带有container类的嵌套div：

<div class="container" id="0">
  <div id="1">
    <div class="container" id="2">
      <div class="container" id="3"></div>
    </div>
    <div id="4">
      <div class="container" id="5"></div>
    </div>
  </div>
</div>

这可能包括更多div和更深/不同的嵌套。

从树中的某个点开始，我想找到该子树中没有嵌套在其他容器中的所有容器。例如，从div #1我想找到div #2和#5，而不是#3（因为它已嵌套在容器#2中实测值）。

实现这一目标的最佳方法是什么？

Answer 1

尝试使用jQuery的filter()方法：

$items = $('#0').find('.container').filter(function(index) {
    return !$(this).parents(':not(#0)').hasClass('container');
});

基本上，它会找到所有项目.container低于您的最高.container，并根据直接父级是否具有类.container来过滤该组。

请参阅此处查看工作示例：http://jsfiddle.net/TzL8Z/1

Answer 2

function getOuterContainers(el) {

    if (el.length == 0)
        return $([]);
    else
        return el.children('.container').add( getOuterContainers(el.children(':not(.container)')) );

}

检查出来：http://jsfiddle.net/GZ3Tx/

Answer 3

使用任意起始节点的解决方案：

function getContainers(base) {
   return base.find('.container').not(base.find('.container .container'));
}

示例：http://jsfiddle.net/tejp/GSRH2/2/

优点是，这适用于任意起始节点，不需要使用简单的JQuery选择器进行选择，就像其他一些答案中的情况一样。此外，它不需要使用children()“手动”遍历整个树。

该方法也可以轻松扩展到类似的问题，例如让所有.item不嵌套到.container。

使用JQuery选择非嵌套的子节点

3 个答案: