Question

155

jQuery: how to loop through elements with data attribute

rated 0 times [ 156] [ 1] / answers: 1 / hits: 50181 / 10 Years ago, thu, october 9, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aman

Add To Favorites

Follow

Total Points: 341

Total Questions: 92

Total Answers: 92

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

answered 10 Years ago raymondd · Accepted Answer

<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

         });

      }

    });