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