jQuery过滤选择器，以删除与模式匹配的嵌套元素 [英] jQuery filtering selector to remove nested elements matching pattern

问题描述

给出此示例标记(假设.outer和.inner之间的元素数量随机:

Given this sample markup (assuming a random number of elements between .outer and .inner:

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

我可以设置jQuery来选择外部和内部div，例如:

I can set up jQuery to select the outer and inner divs as such:

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

工作正常.

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

However, let's say I want to allow an unlimited nesting of this logic, so I may have this:

<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祖先的祖先.

In that situation, when selecting div a via .outer I want to match it with only div b. In otherwords, I want to exclude ancestors of a nested .outer ancestor.

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

I'd like to have parings of outer and inner(s) contained within their nesting level.

我希望.filter()可以实现，但是想不出一个可以在无限嵌套模式下通用的选择器.使用过滤器是否可行?甚至是直接选择器模式?

I'm hoping .filter() could pull it off, but can't think of a selector that would work universally for unlimited nested patterns. Is it doable using a filter? Or maybe even a direct selector pattern?

更新:

我认为类似的方法可能有效，但不确定如何(或是否允许)在选择器中引用"this":

I think something like this could work, but not sure how one can (or if it's allowed) reference 'this' within a selector:

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

更新2:

我应该首先提到这一点:.inner将始终是.outer的后代，但不一定是直接子代.

I should have mentioned this intially: .inner will always be a descendant of .outer but not necessarily an immediate child.

更新3:

以下是一些可以使用的HTML测试样本.在每种情况下，我都希望能够选择.outer并将其包含的.inner与内部外部之间配对.为了清楚起见，我为每个div添加了名称(外层x对与内层x对)

Here's some test samples of HTML that could be used. In each case, I'd want to be able to select the .outer and pair up the .inner's it contains between itself and the nested outer. For clarity, I added names to each div (outer-x pairs with 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类似的道路.我结束了:

I think I ended up going down a similar path as gnarf. I ended up with this:

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

我在正确的轨道上吗?它不起作用，所以我假设我仍然有一些逻辑错误.

Am I on the right track there? It's not working so I assume I have a bit of a logic error still.

推荐答案

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

Here's another option. Suppose you have the .outer o, this will select all inners under it:

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

它的工作方式应与gnarf的答案相同，但要简单一些.

It should work identically to gnarf's answer, but a bit simpler.

首先，它会在此outer下找到所有inner.
接下来，删除作为其他outers

First, it finds all inners under this outer.
Next, remove all inners that are descendants of other outers

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

使用此方法的选择器性能似乎也要优于.filter(): http://jsperf.com/selector-test-find-not

Selector performance seems to be much better using this method as opposed to the .filter() as well: http://jsperf.com/selector-test-find-not

这篇关于jQuery过滤选择器，以删除与模式匹配的嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！