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

您可以遍历每个具有属性＆quot; data-layer＆＃39;的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
            });
        }
    });

因此，这将检查＆lt; layer1＆＃39;，＆＃39; layer2＆＃39;等等。

Answer 3

这里不需要两个循环。您可以使用 Has Attribute Selector 。你也有div的重复ID。 ID应该是唯一的，而是使用类名：

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

迭代值（FYI-BAD APPROACH）：

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

Answer 4

使用class而不是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>

然后你可以分别循环每一层：

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

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

4 个答案: