jQuery:如何使用data属性循环遍历元素

Question

我有几个看起来像这样的div:

<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>

关于如何遍历所有popupDiv div,然后分别遍历每个图层组,我有点难过.我想以每个图层组的单个数组结束.我需要这样的东西:

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

但我不知道我正在寻找的语法.我该怎么办？

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>

循环遍历元素

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

});

单独循环遍历每个组,您可以使用以下逻辑

 //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

您可以循环遍历具有属性"data-layer"的每个div,如下所示:

$('.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
            });
        }
    });

所以这将检查'layer1','layer2'等等.