javascript - 在 jQuery 中获取唯一的 DOM 元素

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

如何只获取唯一的 DOM 元素？

即，$('span.person).unique().length//==> 3

我正在寻找内置函数(如果有)。

Answer 1

如果您只是想获得唯一的人名，这会起作用:

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

所有 DOM 元素都是不同的 - 您只想比较 personname 属性，而不是整个元素。

DEMO