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

本文介绍了jQuery过滤选择器，以删除与模式匹配的嵌套元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

给出此示例标记(假设.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

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

问题描述

推荐答案