Get Unique DOM elements in jQuery

Question

HTML:

<span personname="Mr. Bean" class="person person-male"></span>
<span personname="Neo" class="person person-male"></span>
<span personname="Neo" class="person person-male"></span>
<span personname="Trinity" class="person person-female"></span>
<span personname="Trinity" class="person person-female"></span>
<span personname="Neo" class="person person-male"></span>
<span personname="Mr. Bean" class="person person-male"></span>

JS:

Array.prototype.unique =
    function () {
        var a = [];
        var l = this.length;
        for (var i = 0; i < l; i++) {
            for (var j = i + 1; j < l; j++) {
                // If this[i] is found later in the array
                if (this[i] === this[j])
                    j = ++i;
            }
            a.push(this[i]);
        }
        return a;
};

function unique(list) {
    var result = [];
    $.each(list, function (i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
}

$.unique($('span.person').get()).length // ==> 7
$.unique($('span.person')).length       // ==> 7

$('span.person').get().unique().length  // ==> 7

unique($('span.person').get()).length   // ==> 7
unique($('span.person')).length         // ==> 7

How do I get only the unique DOM elements?

That is, $('span.person).unique().length // ==> 3

I am looking for an in-built function, if there is any.

You need to compare the attributes that you care about, not the elements themselves. — Barmar, May 07 '14 at 17:40
`personname` is not a valid attribute of a span. Instead of using custom attributes, you should use `data-personname`. — Barmar, May 07 '14 at 17:43
You could use `.first()` or `.last()` or `.eq(x)` or whatever, i'm sorry, i don't really understand what you are expecting here. And be aware, each object are different object even they have same properties. Maybe this is what you are expecting even this is not what suggest your posted code: http://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements — A. Wolff, May 07 '14 at 17:44
@Zuck HTML5 has specified `data-XXX` as the place for applications to put custom data. These attributes are reserved for applications, and guaranteed never to conflict with standard attributes. There's an API for it, and jQuery incorporates them into its `.data()` method. — Barmar, May 07 '14 at 17:58
Yes, you can. It's an ordinary attribute, just using a particular naming scheme. — Barmar, May 07 '14 at 18:01

Barmar · Accepted Answer · 2014-05-07T17:55:24.973

If you're just trying to get unique personname, this will work:

function uniquePerson(elements) {
    var results = $();
    var names = {};
    elements.each(function() {
        var name = (this).attr('personname');
        if (!names[name]) {
            results = results.add(this);
            names[name] = true;
        }
    });
    return results;
}

All DOM elements are different -- you just want to compare the personname attribute, not the whole element.

DEMO

Get Unique DOM elements in jQuery

1 Answers1