jQuery过滤选择器以删除匹配模式的嵌套元素

Question

鉴于此示例标记（假设在 .outer 和 .inner 之间有随机数量的元素：

<div class="outer">
    <div>
        <div>
            <div class="inner"></div>
        </div>
    </div>
</div>

我可以设置 jQuery 来选择外部和内部 div，如下所示：

$outer = $('.outer');
$inner = $outer.find('.inner')

工作正常。

但是，假设我想允许这个逻辑的无限嵌套，所以我可能有这个：

<div class="outer"> div a
    <div class="inner"> div b
        <div class="outer"> div c
            <div class="inner"> div d </div>
        </div>
    </div>
</div>

在这种情况下，当通过.outer 选择 div a 时，我只想将它与 div b 匹配。换句话说，我想排除嵌套.outer 祖先的祖先。

我希望在它们的嵌套级别中包含外部和内部的配对。

我希望.filter() 能够成功，但想不出一个可以普遍适用于无限嵌套模式的选择器。使用过滤器是否可行？或者甚至是直接选择器模式？

更新：

我认为这样的事情可能会起作用，但不确定如何（或是否允许）在选择器中引用“this”：

$outer = $('.outer');
$inner = $outer.not('this .outer').find('.inner')

更新 2：

我应该一开始就提到这一点：.inner 将始终是.outer 的后代，但不一定是直系孩子。

更新 3：

这里有一些可以使用的 HTML 测试示例。在每种情况下，我都希望能够选择 .outer 并将其包含在自身和嵌套的外部之间的 .inner 配对。为清楚起见，我为每个 div 添加了名称（outer-x 与 inner-x 对）

//sample 1
<div class="outer"> outer-a
    <div>
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div class="inner"> inner-b </div>
            </div>
        </div>
    </div>
    <div>
        <div class="inner"> inner-a </div>
    </div>
</div>

//sample 2
<div class="outer"> outer-a
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div>
                    <div class="inner"> inner-b </div>
                </div>
            </div>
        </div>
</div>

//sample 3
<div class="outer"> outer-a
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div class="inner"> inner-b
                    <div class="outer"> outer-c 
                        <div class="inner"> inner-c</div>
                    </div>
                </div>
            </div>
        </div>
</div>

//bonus sample (we're trying to avoid this)
<div class="outer"> outer-a
        <div class="inner outer"> inner-a outer-b
            <div class="inner"> inner-b </div>
        </div>
</div>

更新 4

我想我最终走上了与 gnarf 类似的道路。我最终得到了这个：

var $outer = $('.outer');
var $inner = $outer.find('.inner').filter(function(){
    $(this).each(function(){
        return $(this).closest('.outer') == $outer; 
  });                                                                  
});

我在正确的轨道上吗？它不起作用，所以我认为我仍然有一些逻辑错误。

Answer 1

这是另一种选择。假设你有.outero，这将选择它下面的所有inners：

o.find('.inner').not(o.find('.outer .inner'))

它应该与 gnarf 的答案相同，但更简单一些。

首先，它会找到这个outer下的所有inners。
接下来，删除所有属于其他outers 后代的inners

交互工作示例：http://jsfiddle.net/Zb9gF/

与.filter() 相比，使用此方法的选择器性能似乎要好得多：http://jsperf.com/selector-test-find-not

Answer 2

不知道为什么不先选择.inner，然后得到closest.outer？

$inner = $('.inner'); $outer = $inner.closest('.outer');

如果某些内部块根本不在外部块中，请改用第一行

$inner = $('.outer .inner');

Answer 3

如果假设正确，您想选择.outer 下方的所有.inner，除非中间有.outer，否则以下可能会起作用（未经测试）：

$('.outer:not(.inner):has(:not(.outer) .inner:not(.outer), > .inner:not(.outer))');

在http://jsfiddle.net/cEwBT/1/ 的 OP 示例 HTML 测试后更新

Answer 4

如果.inner 始终是.outers 的直接子代 - children() 可能是您最好的选择（jasongetsdown 的回答）

如果你需要看起来更深的东西，你可以这样做：

var $outer = $('.outer').first(); // grab the first .outer
$outer.find('.inner').filter(function() {
    // only if the closest parent .outer is the same as the .outer we are looking in
    return $(this).closest('.outer').get(0) == $outer.get(0);
}).css('border','1px solid #000');

jsfiddle demo

Answer 5

你可以使用一些 css 魔法：

$('.outer>.inner')

Shold 只给你第一级.inner 元素。 :)

Answer 6

$('.outer').children('.inner');

这将选择位于outer 正下方的任何inner。我不太清楚您要选择哪个 div。是a、b、c还是d？将一个叫做外部的东西嵌套在一个叫做内部的东西中并没有多大意义。或许你能提供一个更具体的例子？