将DOM元素数组减少到JavaScript中最深层次的元素

我们假设我有这样的HTML标记：

 
 
 
 
 
text
 
more text
 
 
  

让我们进一步假设我在DOM元素数组中选择了一些：

 var allElements = jQuery('div,p').get(); // result: [div#content, div#sidebar, div#main, p.foo, p.bar] 

现在我想有效地从结果集中删除结果中包含子项的所有元素。 换句话说，只有最深层次才能保留。 所以，期望的结果是：

 var deepestElements = doSomethingWith(allElements); // desired result: [div#sidebar, p.foo, p.bar] 

我怎样才能做到这一点？

顺便说一句：“最深刻的元素”似乎是我想要做的错误术语。 有没有更好的名字？

Answer 1

尝试使用.filter并使用.filter .children().length来过滤掉。 见下文，

 var deepestElements = jQuery('div,p').filter(function () { return ($(this).children().length == 0); }); 

Answer 2

是的，因为SKS建议使用它

 jQuery('div,p').filter(function(){ if($(this).children('div, p').length==0) return true; }) 

这里唯一的变化是，在孩子们中我只查找div和p子节点……并且在这种情况下跳过其他像span这样的…

希望这能解决你的问题……

UPDATE

因为你期待希望这会有所帮助

 var types_to_check = 'div,p'; jQuery(types_to_check).filter(function(){ if($(this).children(types_to_check).length==0) return true; }) 

这不行吗？

Answer 3

我发现了一个有效的解决方案（ JQuery不同的后代（过滤掉结果集中的所有父项） ）。

代码信用给cfedermann ：

 jQuery.fn.distinctDescendants = function() { var nodes = []; var parents = []; // First, copy over all matched elements to nodes. jQuery(this).each(function(index, Element) { nodes.push(Element); }); // Then, for each of these nodes, check if it is parent to some element. for (var i=0; i 0)) { if (parents.indexOf(node_to_check) < 0) { parents.push(node_to_check); } } }); } // Finally, construct the result. var result = []; for (var i=0; i