给定此示例标记(假设.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; 
  });                                                                  
});

我在正确的轨道上吗?它没有用,所以我假设我还有一点逻辑错误.

解决方法

这是另一种选择.假设您有.outer o,这将选择其下的所有内容:
o.find('.inner').not(o.find('.outer .inner'))

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

首先,它找到了这个外部的所有内在者.
接下来,删除所有作为其他outers后代的内部

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

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

jQuery过滤选择器,用于删除与模式匹配的嵌套元素的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. ios – Xcode只看到一些嵌套类的类似扩展,这些扩展是用不同的文件编写的

    解决方法我遇到过类似的问题,似乎编译器正在尝试处理扩展嵌套类的文件,在嵌套类定义之前.因此,您有此错误说该Space没有成员SomeClass.我发现的解决方案是转到目标设置,打开BuildPhases.在“编译源”部分中,您应该将用于定义嵌套类的文件放在扩展它的文件上.这个解决方案似乎甚至可以很好地与您的观察结果一致,当您重新创建文件时,它有时会编译,因为当您重新创建文件时,它在编译源中的位置会发生变化.

  3. ios – 嵌套递归函数

    我试图做一个嵌套递归函数,但是当我编译时,编译器崩溃.这是我的代码:编译器记录arehere解决方法有趣的…它似乎也许在尝试在定义之前捕获到内部的引用时,它是bailing?以下修复它为我们:当然没有嵌套,我们根本没有任何问题,例如以下工作完全如预期:我会说:报告!

  4. ios – 在swift中将捕获列表正确放置在嵌套闭包中

    在Swift中为哪些嵌套闭包定义捕获的引用?如果[weakself]被捕获在只有内部最后面的闭包,GCD将保留ExampleDataSource,直到块完成执行,这就解释了为什么调试看起来像这样:同样的事情会发生,如果没有捕获列表被包括,我们从来没有可选地解开自己,尽管编译器,确实试图警告你!

  5. ios – 无效的软件包 – 嵌套软件包没有在CFBundleSupportedPlatforms Info.plist键中列出的正确平台

    我上传了一个应用程序到iOSAppStoretestflight.iOSAppStore收到以下电子邮件:InvalidBundle–Anestedbundledoesn’thavetherightplatformslistedinCFBundleSupportedplatformsInfo.plistkey.Oncetheseissueshavebeencorrected,youcanthenr

  6. ios – 如何在使用嵌套上下文时自动设置Core Data关系

    解决方法想到的第一个想法是,虽然姓名的人际关系是不可选的,但你并没有说Person的姓名关系也是不可选的.创建一个没有名字的人,可以用您的代码处理,然后在实际需要时创建名称吗?当然不用打扰自定义awakeFromInsert…

  7. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  8. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  9. cocoa-touch – Interface Builder:如何选择嵌套元素?

    在界面构建器中是否有一种方法可以看到我的元素树,以便我可以选择它们.在实际视图中选择内容非常困难,特别是当我有很多元素和嵌套视图等时.谢谢解决方法尝试按住shift并右键单击元素.它应该显示该元素下的视图层次结构的菜单.实际上,等一下,在层次结构中显示出这个元素之上的元素.你想要做的是使用Nib窗口,选择’Window’然后设置它的列视图,这样你就可以更轻松地导航.

  10. 寒城攻略:Listo 教你 25 天学会 Swift 语言 - 21 Nested Types

    //***********************************************************************************************//1.nestedTypes(类型嵌套)//________________________________________________________________________________

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部