jquery. get custom attribute array without duplication

Question

I have the following selector:

$('.photo-box[data="images100"] .photo div')

it return array of values:

[<div class="close-image" imageid="11" terminalid="100"></div>, 
 <div class="close-image" imageid="10" terminalid="100"></div>, 
 <div class="close-image" imageid="12" terminalid="100"></div>, 
 <div class="close-image" imageid="11" terminalid="100"></div>, 
 <div class="close-image" imageid="10" terminalid="100"></div>, 
 <div class="close-image" imageid="12" terminalid="100"></div>]

I want to get array all different imageid values without duplication.

How can I make it ?

P.S.

in my case it should be

["10", "11", "12"]

You could loop through the above array and add unique imageid to a new array — depperm, Jul 13 '15 at 17:15
You're using the data-attribute selector wrong, should be `[data-attribute-name="attribute-value"]`, which is not going to get you what you want. You should use jQuery's `.attr()` function — JLF, Jul 13 '15 at 17:17
Can this thread help you ?http://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript — believe me, Jul 13 '15 at 17:22
@believeme that's pretty irrelevant as they are trying to get data from attributes and put them into arrays, rather than getting data from arrays/objects — JLF, Jul 13 '15 at 17:24
**$('.photo-box[data="images100"] .photo div[imageId]').attr("imageId")** returns single value — gstackoverflow, Jul 13 '15 at 17:26

score 3 · Accepted Answer · answered Jul 13 '15 at 17:27

var image_ids = [];
$('.photo-box[data="images100"] .photo div').each(function() {
    var image_id = $(this).attr('imageid');
    if (image_ids.indexOf(image_id) == -1) {
        image_ids.push(image_id);
    }
});

The above will create an array of image ID's, loop through your image divs, check if the image ID is already in the array, and if not, add it to the array.

sdgluck · Answer 2 · 2015-07-13T18:08:00.657

Here are two simple example, one using pure JavaScript and the other jQuery. The basic principle is that we maintain an array of IDs we have already seen and only add the value of an imageid attribute if it does not already exist in the array of IDs.

For demonstration purposes I omitted your complicated selector (which you might want to consider refactoring as it will be quite inefficient).

Using pure JavaScript

var elements = document.querySelectorAll('[imageid]');
var ids = [];

for(var i = 0; i < elements.length; i++) {
  var element = elements[i];
  var elementImageId = element.getAttribute('imageid');
  
  if(ids.indexOf(elementImageId) === -1) {
    ids.push(elementImageId);
  }
};

document.querySelector('#result').innerHTML = JSON.stringify(ids);

<div imageid="10"></div>
<div imageid="10"></div>
<div imageid="11"></div>
<div imageid="12"></div>

<div id="result"></div>

Using jQuery

var ids = [];

$('[imageid]').each(function() {
  var $element = $(this);
  var elementImageId = $element.attr('imageid');
  
  if(ids.indexOf(elementImageId) === -1) {
    ids.push(elementImageId);
  }
});

$('#result').text(JSON.stringify(ids));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div imageid="10"></div>
<div imageid="10"></div>
<div imageid="11"></div>
<div imageid="12"></div>

<div id="result"></div>

score 0 · Answer 3 · answered Jul 13 '15 at 17:26

var pushObj = {};
$('.photo-box[data="images100"] .photo div').each(function () {
    pushObj[$(this).attr('imageid')] = true;
});

var res = [];
for (var i in pushObj) {
    res.push(i);
}
console.log(res)

http://jsfiddle.net/drph1fLc/1/

var res = [];
$('.photo-box[data="images100"] .photo div').each(function () {
    res.push($(this).attr('imageid'));
});

console.log(res, "With duplicates")
console.log(jQuery.unique(res), "Without duplicates")

http://jsfiddle.net/drph1fLc/2/

score 0 · Answer 4 · answered Jul 13 '15 at 17:31

You could write your own jQuery function. Something like below would work:

jQuery.fn.withoutDuplicates = function(attr) {
  var elAttrs = [];
  return jQuery(this).filter(function() {
    var $el = jQuery(this);
    if (typeof $el !== typeof undefined || $el === false) { return true; }
    if (elAttrs.indexOf($el.attr(attr)) === -1) {
      elAttrs.push($el.attr(attr));
      return true;
    }
    return false;
  });
};

Then, you should be able to call this function from your code, for example:

$('.photo-box[data="images100"] .photo div').withoutDuplicates("imageId");

score 0 · Answer 5 · answered Jul 13 '15 at 17:32

first of all, reemplace your attributes terminalid and imageid for data-terminalid and data-imageid, like this :

<div class="close-image" data-imageid="11" data-terminalid="100"></div>
<div class="close-image" data-imageid="10" data-terminalid="100"></div>
<div class="close-image" data-imageid="12" data-terminalid="100"></div>
<div class="close-image" data-imageid="11" data-terminalid="100"></div>
<div class="close-image" data-imageid="10" data-terminalid="100"></div>
<div class="close-image" data-imageid="12" data-terminalid="100"></div>

And then try something like this :

var distinctId = []
$('.photo-box[data-terminalid=100] .photo div').each(function(){
     var elId = $(this).attr("data-imageid");
     if(distinctId.indexOf(elId) == -1){
           distinctId.push(elId);
     }

});

jquery. get custom attribute array without duplication

5 Answers5