"jQuery：如何遍历具有数据属性的元素"

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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

here is another brain teaser - what if you have a variable for the element name and variable for the data attribute: