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

给定此示例标记（假设.outer和.inner之间的元素随机数：

我可以设置jQuery来选择外部和内部div这样：

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

工作良好。

但是，假设我想允许无限制地嵌套这个逻辑，所以我可能会这样：

 
 div a 
 div b 
 div c 
 div d 
 
 
  

在那种情况下，当选择div a via .outer我想将它与div b匹配。 换句话说，我想排除嵌套.outer祖先的祖先。

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

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

更新：

我认为像这样的东西可以工作，但不确定如何（或者如果允许的话）在选择器中引用’this’：

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

更新2：

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

更新3：

这是一些可以使用的HTML测试样本。 在每种情况下，我都希望能够选择.outer并将它自身与嵌套外部之间包含的.inner配对。 为清楚起见，我为每个div添加了名称（带有inner-x的外部x对）

 //sample 1 
 outer-a 
 
 inner-a 
 inner-b 
 inner-b 
 
 
 
 
 
 inner-a 
 
 
 //sample 2 
 outer-a 
 inner-a 
 inner-b 
 
 inner-b 
 
 
 
 
 //sample 3 
 outer-a 
 inner-a 
 inner-b 
 inner-b 
 outer-c 
 inner-c
 
 
 
 
 
 //bonus sample (we're trying to avoid this) 
 outer-a 
 inner-a outer-b 
 inner-b 
 
  

更新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 ：

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

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

首先，它发现了这个outer所有inner 。
接下来，删除所有作为其他inners后代的内部

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

与.filter()相比，使用此方法的选择器性能似乎要好得多： http ： .filter()

Answer 2

如果.inner总是.outer s的直接孩子 – children()可能是你最好的选择（jasongetsdown的回答）

如果你需要看起来更深的东西，你可以这样做：

 var $outer = $('.outer').first(); // grab the first .outer $outer.find('.inner').filter(function() { // only if the closest parent .outer is the same as the .outer we are looking in return $(this).closest('.outer').get(0) == $outer.get(0); }).css('border','1px solid #000'); 

jsfiddle演示

Answer 3

 $('.outer').children('.inner'); 

这将选择位于outer正下方的任何inner 。 我真的不清楚你要选择哪个div。 是a，b，c还是d？ 在内部称为内部的东西中嵌入一些内容并不是很有意义。 也许你能提供更具体的例子吗？

Answer 4

如果假设正确，你想要选择.inner下面的所有.inner ，除非中间有.outer ，否则后续工作（未经测试）：

 $('.outer:not(.inner):has(:not(.outer) .inner:not(.outer), > .inner:not(.outer))'); 

在http://jsfiddle.net/cEwBT/1/上对OP示例HTML进行测试后更新

Answer 5

你可以使用一些css魔法：

 $('.outer>.inner') 

Shold只给你第一级.inner元素。 🙂

Answer 6

我想知道为什么不首先选择.inner ，然后closest .outer ？

 $ inner = $（'。inner'）;
 $ outer = $ inner.closest（'。outer'）;

如果某些内部块可能根本不在外部块中，请改用第一行

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