javascript - JQuery 不同的后代(过滤掉结果集中的所有父级)

Question

我needed a method过滤掉结果集中其他元素的父元素的所有元素。我尝试编写一个插件:

jQuery.fn.distinctDescendants = function() {
    var nodes = [];
    var result = this;

    jQuery(result).each(function() {
        var node = jQuery(this).get(0);
        if(jQuery(node).find(result).length == 0) {
            nodes.push(node);
        }
    });

    return nodes;
};

当我在 this example page 上运行以下命令时:

jQuery('body, textarea').distinctDescendants();

我得到(错误的)结果:

[body.contact-page, textarea, textarea]

这是错误的，因为 body 是结果中至少一个其他元素(都是文本区域)的父元素。因此预期的结果是:

[textarea, textarea]

这里出了什么问题？

Answer 1

为什么不使用 jQuery('body > input') 来代替？

您可以使用以下(详细)代码来实现您想要的；它应该可以直接替换您的插件代码。

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;
};