Javascript jQuery：如何循环遍历具有数据属性的元素

我有几个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>

---

但我不知道我要找的语法。我该怎么办？

这里每个循环不需要两个循环。您可以使用。对于div，您也有重复的id。ID应该是唯一的，请改用类名：

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

用于迭代数值（FYI-BAD方法）：

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

要单独循环每个组，可以使用以下逻辑

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

---

使用类而不是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
   });
}

---

for（var i=1；i您可以循环遍历具有属性“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”等等。
Id应该是唯一的。！无效的HTML.Woops！编辑为使用类，但问题仍然相同。如何分别循环每个layergroup？这可能是（相反）您想要的：。问题是“如何分别循环每个layergroup of div”.Milind是对的，OP没有以正确的方式提出问题。OP应该在每个popupDiv中写入更多的div，这样我们就可以知道每个popupDiv中都有一些可以循环的东西div@doniyor：很高兴你明白了这一点。另外，创建属性数组，然后再次遍历它们是没有意义的。很抱歉让大家感到困惑，我已经将我的帖子编辑到了be更清楚。@Bas:如果只需要数组中的数据层值，只需使用
$（“[data layer]”）.map（function（）{return$（this.data（'layer'）；}）.get（）
。这不会从1循环到2，而且每个都需要提到：
$（this.data（'layer'））会更好一些
保存在变量+1中。谢谢，这对我很有效。我确实需要对它进行一些编辑：if（dataArray.indexOf（dataLayer）<0）对我更有效。
<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
   });
}

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