jQuery selector to get just the first occurrence of every value

Question

I have an HTML like this:

<div data-value="a"></div>
<div data-value="b"></div>
<div data-value="c"></div>
<div data-value="d"></div>
<div data-value="a"></div>
<div data-value="d"></div>
<div data-value="e"></div>

I would like to use jQuery to select all the divs with a different data-value attribute.

Here's my attempt:

$( document ).ready(function() {
    $('div[data-value]').each(function(){
        var value = $(this).data("value");
        console.log(value);
    });
});

This of course will print out all the occurrences: a, b, c, d, a, d, e.

Instead I need to print just the first occurrence of every value: a, b, c, d, e.

Yes, I could use an array to put elements in it and check if it's already in there and do my stuff, but I'm looking for a compact and elegant jQuery code, like a selector or a filter function or something. Any idea?

Fiddle

adeneo · Accepted Answer · 2014-07-16T09:11:32.503

4

I would like to select with jquery all the div with different data-value attribute.
....
like a selector or a filter function or something
....

I'm assuming the others didn't read the question, and that you really wanted to select the elements that had unique data attributes, not just get an array with the values of those attributes.

A filter seems like the correct approach here, checking if the currently iterated element is the first one with that data-value etc

$('div[data-value]').filter(function(_, x) {
    return $('div[data-value="' + $(x).data('value') + '"]').get(0) === this;
});

FIDDLE

edited Jul 16 '14 at 09:11

answered Jul 16 '14 at 09:02

adeneo

312,895
29
395
388

All the other answer are actually good as well, but not exactly what i asked for. This is the correct answer to me. Thanks everyone – pumpkinzzz Jul 16 '14 at 09:14

score 3 · Answer 2 · answered Jul 16 '14 at 08:52

3

You can use .map() in along with .unique()

$( document ).ready(function() {
    var arr = $('div[data-value]').map(function(){
        return $(this).data("value");
    }).get();
    console.log(jQuery.unique(arr));
});

DEMO

answered Jul 16 '14 at 08:52

Satpal

132,252
13
159
168

score 2 · Answer 3 · answered Jul 16 '14 at 08:53

2

Try this, use .map() with $.unique

$( document ).ready(function() {
    var dataValues = $('div[data-value]').map(function(){
        return $(this).data("value");
    }).get();
    console.log($.unique(dataValues));
});

Demo

answered Jul 16 '14 at 08:53

Dhaval Marthak

17,246
6
46
68

score 0 · Answer 4 · answered Jul 16 '14 at 08:53

Try with $.inArray in jquery

var  tempArray = [];

$('div[data-value]').each(function(){
        var value = $(this).data("value");
        if($.inArray(value , tempArray) <= -1){
             tempArray.push(value);
        }
    });

console.log(tempArray);

DEMO

jQuery selector to get just the first occurrence of every value

4 Answers4

Demo