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
– depperm, Commented Jul 13, 2015 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
– JLF, Commented Jul 13, 2015 at 17:17

Ben Fried · Accepted Answer · 2015-07-13 17:27:06Z

3

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.

answered Jul 13, 2015 at 17:27

Ben Fried

2,2141 gold badge16 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sdgluck · Accepted Answer · 2015-07-13 18:08:00Z

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>

vorillaz · Accepted Answer · 2015-07-13 17:26:19Z

0

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/

answered Jul 13, 2015 at 17:26

vorillaz

6,3062 gold badges32 silver badges46 bronze badges

Comments

Mindastic · Accepted Answer · 2015-07-13 17:31:22Z

0

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");

answered Jul 13, 2015 at 17:31

Mindastic

4,1413 gold badges21 silver badges20 bronze badges

Comments

Maxi Baez · Accepted Answer · 2015-07-13 17:32:41Z

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

});

Collectives™ on Stack Overflow

jquery. get custom attribute array without duplication

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related