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 添加了名称(外部 x 与内部 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

这是另一种选择。假设您有 .outer o，这将选择其下的所有 inner:

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

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

首先，它找到此 outer 下的所有 inner。
接下来，删除所有作为其他外部后代的内部

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

使用此方法的选择器性能似乎比 .filter() 更好:http://jsperf.com/selector-test-find-not