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

【问题标题】：jQuery: how to loop through elements with data attributejQuery：如何遍历具有数据属性的元素
【发布时间】：2014-10-09 06:42:51
【问题描述】：

我有几个看起来像这样的 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，然后分别循环遍历每个 layergroup，我有点困惑。我想以每个图层组的单个数组结束。我需要类似的东西：

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

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

【问题讨论】：

Id 应该是唯一的..！无效的 HTML。
糟糕！编辑为改用类，但问题保持不变。如何分别循环遍历每个图层组？
这可能是（反向）你想要的：stackoverflow.com/questions/26195212/….

标签： javascript jquery html

【解决方案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
         });
      }
    });

【讨论】：

顺便提一下：$(this).data('layer') 保存在变量 +1 中会好一些。
谢谢，这对我有用。我确实需要对其进行一些编辑： if(dataArray.indexOf(dataLayer)

【解决方案2】：

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

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

对值进行迭代（仅供参考）：

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

【讨论】：

问题是“如何单独循环遍历div的每个layergroup”。
Milind 是对的，OP 没有以正确的方式提出问题。 OP 应该在每个 popupDiv 中写更多的 div，这样我们就可以知道每个 div 里面有循环的东西
@doniyor：很高兴你明白了。制作属性数组然后再次迭代它们也是没有意义的。
抱歉给大家带来了困惑，我已经编辑了我的帖子以更清晰。
@Bas：如果您只需要数组中的数据层值，请使用$("[data-layer]").map(function() { return $(this).data('layer');}).get()。

【解决方案3】：

您可以循环遍历每个具有“数据层”属性的 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”等等。

【讨论】：

【解决方案4】：

使用类代替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
   });
}

【讨论】：

不会从 1 循环到 2 和。每个