3

假设我有这样的 HTML 标记：

<body>
  <div id="content">
    <div id="sidebar">
    </div>
    <div id="main">
        <p class="foo">text</p>
        <p class="bar">more <span>text</span></p>
    </div>
  </div>
</body>

让我们进一步假设我在 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]

我怎样才能做到这一点？

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

4

3 回答 3

4

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

var deepestElements = jQuery('div,p').filter(function () {  
                         return ($(this).children().length == 0);
                       });
于 2012-04-10T19:00:40.623 回答
1

好吧，是的，因为 SKS 建议使用这个

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

这里唯一的变化是在孩子中我只寻找 div 和 p 子节点......并在这种情况下跳过其他像 span ......

希望这能解决您的问题...

更新

正如你所期待的那样希望这会有所帮助

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

这不行吗？

于 2012-04-10T19:52:15.963 回答
0

我找到了一个可行的解决方案（JQuery distinct descendants (filter out all parents in result set)）。

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<nodes.length; i++) {
        var node_to_check = nodes[i];
        jQuery(this).each(function(index, Element) {

            // Skip self comparisons.
            if (Element == node_to_check) {
                return;
            }

            // Use .tagName to allow .find() to work properly.
            if((jQuery(node_to_check).find(Element.tagName).length > 0)) {
                if (parents.indexOf(node_to_check) < 0) {
                    parents.push(node_to_check);
                }
            }
        });
    }

    // Finally, construct the result.
    var result = [];
    for (var i=0; i<nodes.length; i++) {
        var node_to_check = nodes[i];
        if (parents.indexOf(node_to_check) < 0) {
            result.push(node_to_check);
        }
    }

    return result;
};
于 2012-04-14T12:48:36.787 回答