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>

在那种情况下,当选择div a via时.outer我希望只与div b匹配.换句话说,我想排除嵌套.outer祖先的祖先.

我想在它们的嵌套级别中包含外部和内部的parings.

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

更新:

我认为这样的事情可以起作用,但不确定如何(或者如果允许的话)在选择器中引用"this":

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

更新2:

我本应该提到这一点:.inner永远是一个后代,.outer但不一定是直接的孩子.

更新3:

这是一些可以使用的HTML测试样本.在每种情况下,我都希望能够选择.outer并将它本身和嵌套外部之间包含的.inner配对.为清楚起见,我为每个div添加了名称(带有inner-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它下的所有s:

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

它应该与gnarf的答案完全相同,但有点简单.

首先,它发现了所有inner这些outer.
接下来,删除所有inners其他的后代outers

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

选择器性能似乎比使用这种方法好得多.filter():http://jsperf.com/selector-test-find-not