JQuery截然不同的后代（过滤掉结果集中的所有父项） [英] JQuery distinct descendants (filter out all parents in result set)

问题描述

我需要一个方法来过滤掉结果集中所有其他元素的父元素。我试图写一个插件：

$ p $ 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）;
}
}）;

返回节点;
};


当我在本示例页面：

  jQuery（'body，textarea' ）.distinctDescendants（）; 
  

我得到了错误的结果：

  [body.contact-page，textarea，textarea] 
  

这是错误的，因为body是结果中至少有一个其他元素的父级（都是textareas）。因此，预期的结果是：

$ p $ [textarea，textarea]


这里有什么不对吗？

解决方案

使用 jQuery（'body> input'）而不是？

您可以使用以下（详细）代码达到你想要的;它应该作为您的插件代码的插件替换。

  jQuery.fn.distinctDescendants = function（）{
 var nodes = []; 
 var parents = []; 
 
 //首先，将所有匹配的元素复制到节点。 
 jQuery（this）.each（function（index，Element）{
 nodes.push（Element）; 
}）; 
 
 //然后，对于每个节点，检查它是否是某个元素的父元素。 
 for（var i = 0; i< nodes.length; i ++）{
 var node_to_check = nodes [i]; 
 jQuery（this）.each（function（index，Element）{
 
 //跳过自我比较
 if（Element == node_to_check）{
 return; 
} 
 
 //使用.tagName来允许.find（）正常工作
 if（（jQuery（node_to_check）.find（Element.tagName）.length> 0））{
 if（parents.indexOf（node_to_check）< 0）{
 parents.push（node_to_check）; 
} 
} 
}）; 
} 
 
 //最后，构造结果。 
 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）; 
} 
} 
 
返回结果; 
}; 
  

I needed a method to filter out all elements that are parents of other elements in the result set. I tried to write a plugin:

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

When i run the following command on this example page:

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

I get the (wrong) result:

[body.contact-page, textarea, textarea]

This is wrong because body is the parent of at least one other element in the result (both textareas). Therefore the expected result would be:

[textarea, textarea]

What is wrong here?

解决方案

Why aren't you using jQuery('body > input') instead?

You can use the following (verbose) code to achieve what you want; it should work as drop-in replacement of your plugin code.

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

这篇关于JQuery截然不同的后代（过滤掉结果集中的所有父项）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！