How to use $.unique() function

Question

Please, help me to understand, how to use $.unique() function.

From the docs:

Sorts an array of DOM elements, in place, with the duplicates removed.

I'm trying this code:

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

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

It returns 3, but I supposed 1. What am I missing? And it would be great to see some practice example of using this function. Thanks.

P.S.

I've also tried to sort a few numbers, but got a very curious result. The following code returns different values in different browsers!

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

• Safari - 1, 2, 3, 1
• Opera - 2, 1, 3
• FF - 3, 2, 1, 3
• Chrome - 3, 2, 1
• IE - 2, 1, 3

Answer 1

$.unique is only meant for arrays of DOM elements. Not arrays of other things.

In your case, you have 3 <h3>s. They are not the same DOM element, so $.unique doesn't remove them.

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

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

$.unique is for arrays that may contain the same element multiple times.

<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

On another note, if you want to make $.unique sort arrays of other things, and not just DOMElements, you can do something like this (Taken from 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);

Answer 2

$.unique works on an array of DOMElements, not numbers, strings, or a even a jQuery object.

It is used internally by jQuery in add() to prevent duplicates from being added to the same jQuery object. Here is an example of it:

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

It should be very rare that you have an ordinary Javascript array of DOMElements though, if you're using jQuery. It is most useful internally within the jQuery source code.

PS. If you want to remove duplicate entries from an array of numbers/strings I recommend using js158's jQuery solution in this question: jQuery function to get all unique elements from an array?

Answer 3

Quote from the docs page:

Note that this only works on arrays of DOM elements, not strings or numbers.

So that's why the numbers are different.

The function only removes duplicate DOM elements, not their innerHTML values in case that's what you were wondering, there's examples how to use it over on the documentation page

Answer 4

From here

Note that this only works on arrays of DOM elements, not strings or numbers.

It also provides an example.

Answer 5

$.unique(array)

unique is an inbuilt jQuery function to return unique values from an Jaascript array.