如何使用 $.unique() 函数答案

【问题标题】：How to use $.unique() function如何使用 $.unique() 函数
【发布时间】：2011-11-14 00:44:52
【问题描述】：

请帮我理解，如何使用$.unique()函数。

来自文档：

对 DOM 元素数组进行排序，并删除重复项。

我正在尝试这段代码：

<h1 class="foo">Headline</h1>
<h1 class="foo">Headline</h1>
<h1 class="foo">Headline</h1>

alert( $.unique($('.foo')).length );

它返回 3，但我认为是 1。我错过了什么？很高兴看到一些使用此功能的实践示例。谢谢。

附言

我也尝试对一些数字进行排序，但得到了一个非常奇怪的结果。以下代码在不同的浏览器中返回不同的值！

$.unique([ 1, 2, 2, 3, 3, 1 ])

Safari - 1、2、3、1
歌剧 - 2、1、3
FF - 3、2、1、3
铬 - 3、2、1
IE - 2、1、3

【问题讨论】：

如果你这样做 $.unique($.unique([1,2,2,3,3,1]));在 Chrome 中，你会得到 [1,2,3]。只是说。
@Ivan：不要依赖这种行为。
@Rocket：正如我所说：“只是说。”

标签： jquery

【解决方案1】：

$.unique 仅适用于 DOM 元素数组。不是其他东西的数组。

在您的情况下，您有 3 个<h3>s。它们不是同一个 DOM 元素，因此 $.unique 不会删除它们。

<h1 class="foo">Headline</h1>
<h1 class="foo">Headline</h1>
<h1 class="foo">Headline</h1>

alert($.unique($('.foo')).length);  // 3

$.unique 用于可能包含多次相同元素的数组。

<h1 class="foo otherFoo">Headline</h1>
<h1 class="foo">Headline</h1>

var $foo = $('.foo').get();
var $otherFoo = $('.otherFoo').get();

var $e = $foo.concat($otherFoo);
alert($e.length); // 3
alert($.unique($e).length); // 2

另一方面，如果你想让$.unique 对其他东西的数组进行排序，而不仅仅是 DOMElements，你可以这样做（取自here）：

(function($){
    var _old = $.unique;
    $.unique = function(arr){
        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        }
        else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

【讨论】：

$('.foo').add('.otherFoo') 不是数组，也不包含任何重复项。
换句话说，$.unique() 删除 duplicate DOM 元素，但不删除 identical DOM 元素。
PaulPRO 是对的：$('.foo') 是一个类似数组的 jQuery 对象，而不是一个实际的数组。然而，在这种情况下，这一事实是次要的。
这不是次要的。 .add() 内部调用 $.unique 因此无论您是否调用 .unique，第二个示例都会输出 2。（IE。alert($('.foo').add('.otherFoo').length); 输出 2。试试吧。
我认为 jQuery 对象在任何情况下都不可能包含重复项，因此在 jQuery 对象上调用 .unique 绝对没有任何作用。

【解决方案2】：

$.unique 适用于 DOMElements 数组，而不是数字、字符串，甚至是 jQuery 对象。

jQuery 在add() 内部使用它来防止将重复项添加到同一个 jQuery 对象中。这是一个例子：

HTML：

<h1 class="foo">Headline</h1>
<h1 class="foo bar">Headline</h1>
<h1 class="bar">Headline</h1>

Javascript：

var foo = $('.foo').get(); // Array of size 2
var bar = $('.bar').get(); // Array of size 2
var myArr = [];
for(var i = 0; i < foo.length; i++)
    myArr.push(foo[i]);
for(i = 0; i < bar.length; i++)
    myArr.push(bar[i]);

alert(myArr.length); // Outputs 4
alert($.unique(myArr).length); // Outputs 3

如果你使用 jQuery，你应该很少有一个普通的 DOMElements Javascript 数组。它在 jQuery 源代码内部最有用。

PS。如果您想从数字/字符串数组中删除重复条目，我建议在此问题中使用 js158 的 jQuery 解决方案：jQuery function to get all unique elements from an array?

【讨论】：

【解决方案3】：

引用自docs page：

请注意，这仅适用于 DOM 元素数组，不适用于字符串或数字。

所以这就是数字不同的原因。

该函数只删除重复的 DOM 元素，而不是它们的 innerHTML 值，以防万一您想知道，有示例如何在 documentation page 上使用它

【讨论】：

【解决方案4】：

来自here

请注意，这仅适用于 DOM 元素数组，不适用于字符串或数字。

它也提供了一个例子。

【讨论】：

【解决方案5】：

$.unique(array)

unique 是一个内置的 jQuery 函数，用于从 Jaascript 数组。

【讨论】：