Javascript jQuery：如何遍历具有数据属性的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26271933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: how to loop through elements with data attribute
提问by yesman
I have several divs that looks like this:
我有几个看起来像这样的 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>
I'm a bit stumped as to how to loop through all popupDiv divs, and then loop through each layergroup separately. I want to end with a single array for each layergroup. I'd need something like:
对于如何遍历所有 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;
But I don't know the syntax I'm looking for. What do I do?
但我不知道我正在寻找的语法。我该怎么办？
回答by Bhushan Kawadkar
<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>
Loop through the elements
循环遍历元素
$('.popupDiv[data-layer]').each(function(){
});
to loop through each group seperately, you can use below 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
});
}
});
回答by WisdmLabs
You can loop through each of the div having attribute 'data-layer' as follows:
您可以循环遍历每个具有属性“数据层”的 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
});
}
});
So this will check for 'layer1', 'layer2' and so on.
因此，这将检查“layer1”、“layer2”等。
回答by Milind Anantwar
You do not need two each loops here. You can use Has Attribute Selector. you are also having duplicate IDs for divs. IDs should be unique, use class name instead:
这里不需要每个循环两个。您可以使用 具有属性选择器。您也有 div 的重复 ID。ID 应该是唯一的，请改用类名：
$('[data-layergroup]').each(function(){
// Do stuff with each div
console.log($(this).data('layergroup'));//current data layer value
});
For iterating over the values(FYI-BAD APPROACH):
对于迭代值（仅供参考-错误方法）：
$.each($("[data-layergroup]").map(function() { return $(this).data('layergroup');}).get(), function(index, item) {
// item
});
回答by Shadowshine
use class instead of id:
使用类而不是 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>
Then you can loop each layer seperatly:
然后你可以单独循环每一层：
for (var i = 1; i <= 2; i++) {
$(".popupDiv[data-layer|='layer"+i+"']").each(function(){
// do stuff with layer i
});
}
