jQuery: làm thế nào để lặp qua các yếu tố với dữ liệu thuộc tính

Question

Tôi có một vài divs trông như thế này:

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

tôi một chút bối rối như thế nào để lặp qua tất cả các div popupDiv, và sau đó lặp qua mỗi layergroup riêng biệt. Tôi muốn kết thúc bằng một mảng duy nhất cho mỗi nhóm. Tôi cần một cái gì đó như:

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

Nhưng tôi không biết cú pháp tôi đang tìm kiếm. Tôi làm gì?

Answer 1

Bạn có cùng id cho nhiều div, đây là không thể chấp nhận trong jQuery. Hoặc loại bỏ nó hoặc làm cho họ độc đáo hoặc làm cho nó class

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

Và vòng lặp thông qua các yếu tố

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

}); 

để lặp qua từng nhóm riêng biệt, bạn có thể sử dụng dưới đây 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

Bạn không cần hai vòng lặp tại đây. Bạn có thể sử dụng Has Attribute Selector. bạn cũng có các ID trùng lặp cho các div. ID phải là duy nhất, sử dụng tên lớp thay vì:

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

Đối iterating trên các giá trị (TIẾP CẬN FYI-BAD):

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

Answer 3

sử dụng lớp thay vì 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> 

Sau đó, bạn có thể lặp mỗi lớp seperatly:

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

Answer 4

Thứ nhất, sử dụng lớp thay vì id và thay đổi html của bạn như @doniyor nói.

Sau đó, bạn lặp qua mỗi div có thuộc tính 'dữ liệu lớp' như thể sau:

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

Vì vậy, đây sẽ kiểm tra 'layer1', 'layer2' và vân vân.