jQuery: how to loop through elements with data attribute

Question

I have several divs that looks like this:

<div class='popupDiv' data-layergroup='layer1'>divcontent 1</div>
<div class='popupDiv' data-layergroup='layer1'>divcontent 2</div>
<div class='popupDiv' data-layergroup='layer2'>divcontent 3</div>
<div class='popupDiv' data-layergroup='layer2'>divcontent 4</div>

I'm a bit stumped as to how to loop through all popupDiv divs, and then loop through each layergroup separately. I want to end with a single array for each layergroup. I'd need something like:

var mainArray = [];
$('.popupDiv').each(function(){
    var tempArray = [];
    $([unique layer value]).each(function(){
        // Put div values from layergroup in tempArray
    });
    mainArray.push(tempArray);
});
return mainArray;

But I don't know the syntax I'm looking for. What do I do?

Woops! Edited to use classes instead, but the question remains the same. How do I loop through each layergroup separately? — yesman
– yesman, Commented Oct 9, 2014 at 6:47
That might be ( reversed ) what you want: stackoverflow.com/questions/26195212/…. — loveNoHate
– loveNoHate, Commented Oct 9, 2014 at 6:47

Richard Garside · Accepted Answer · 2018-09-12 12:18:21Z

29

<div class='popupDiv' data-layer='layer1'></div>
<div class='popupDiv' data-layer='layer1'></div>
<div class='popupDiv' data-layer='layer2'></div>
<div class='popupDiv' data-layer='layer2'></div>

Loop through the elements

$('.popupDiv[data-layer]').each(function(){

});

to loop through each group seperately, you can use below logic

 //create an array to store processed data-layer type
 var dataArray = new Array();
    $('.popupDiv').each(function(){
      var dataLayer = $(this).data('layer');
      //check if data-layer already processed
      if(!dataArray.indexOf(dataLayer))
      {
         //update data array
         dataArray.push(dataLayer);
         $('.popupDiv[data-layer="'+ dataLayer +'"]').each(function(){
            //do your stuff here
         });
      }
    });

edited Sep 12, 2018 at 12:18

Richard Garside

89.5k12 gold badges88 silver badges98 bronze badges

answered Oct 9, 2014 at 6:47

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

2 Comments

Regent Over a year ago

Just to mention: it will be a little better with $(this).data('layer') saved in variable, +1.

yesman Over a year ago

Thanks, this worked for me. I did need to edit it somewhat: if(dataArray.indexOf(dataLayer) < 0) worked better for me.

Richard Garside · Accepted Answer · 2018-09-12 12:21:42Z

5

You can loop through each of the div having attribute 'data-layer' as follows:

$('.popupDiv').each(function(i) {
        if ($(this).attr('data-layer') == 'layer' + i + 1) {

            $(this).each(function() {
                alert($(this).attr('data-layer'));
                //change this to whatever you want
            });
        }
    });

So this will check for 'layer1', 'layer2' and so on.

edited Sep 12, 2018 at 12:21

Richard Garside

89.5k12 gold badges88 silver badges98 bronze badges

answered Oct 9, 2014 at 7:45

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-10-09 06:59:43Z

2

You do not need two each loops here. You can use Has Attribute Selector. you are also having duplicate IDs for divs. IDs should be unique, use class name instead:

$('[data-layergroup]').each(function(){
    // Do stuff with each div
    console.log($(this).data('layergroup'));//current data layer value
});

For iterating over the values(FYI-BAD APPROACH):

$.each($("[data-layergroup]").map(function() {  return $(this).data('layergroup');}).get(), function(index, item) {
   // item
});

edited Oct 9, 2014 at 6:59

answered Oct 9, 2014 at 6:44

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

6 Comments

JJJ Over a year ago

The question is "how to loop through each layergroup of divs seperately".

doniyor Over a year ago

Milind is right and the OP didnot put the question in a right way. OP should write more div inside each popupDiv then so we can know there is smthing to loop inside each div

Milind Anantwar Over a year ago

@doniyor: GLad you get the point. also it does not make sense to make attribute array and then iterate again over them.

yesman Over a year ago

Sorry for the confusion guys, I have edited my post to be more clear.

Milind Anantwar Over a year ago

@Bas: just use $("[data-layer]").map(function() { return $(this).data('layer');}).get() if you only want data layer values in array.

|

RedShadow · Accepted Answer · 2014-10-09 06:49:32Z

1

use class instead of id:

<div class='popupDiv' data-layer='layer1'></div>
<div class='popupDiv' data-layer='layer1'></div>
<div class='popupDiv' data-layer='layer2'></div>
<div class='popupDiv' data-layer='layer2'></div>

Then you can loop each layer seperatly:

for (var i = 1; i <= 2; i++) {
  $(".popupDiv[data-layer|='layer"+i+"']").each(function(){
       // do stuff with layer i
   });
}

answered Oct 9, 2014 at 6:49

RedShadow

1216 bronze badges

1 Comment

loveNoHate Over a year ago

that doesnt loop from 1 to 2 and. each

Collectives™ on Stack Overflow

jQuery: how to loop through elements with data attribute

4 Answers 4

2 Comments

Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related