5

我有很多相同类的元素。这些元素通过属性“ data-xxx ”进行分组

<div class="myclass" data-n="group1"></div>
<div class="myclass" data-n="group1"></div>
<div class="myclass" data-n="group1"></div>
.... 
<div class="myclass" data-n="group2"></div>
<div class="myclass" data-n="group2"></div>
...
<div class="myclass" data-n="group3"></div>
...
...

如何在每个项目上执行一个功能，但在每个组中只使用这样的东西一次？

$('.myclass').each(function(){

/// My function

});
4

4 回答 4

3

工作示例：http: //jsfiddle.net/5sKqU/1/

$(document).ready(function() {
    var group = {}; //an object that we're going to use as a hash  
    $('.myclass').each(function(){ 
        if (group[$(this).attr('data-n')] != true) {
            group[$(this).attr('data-n')] = true;

            //do something here once per each group
            alert('Group: '+ $(this).attr('data-n'));
        }
    }); 
});

我假设您只需要在页面加载时运行一次。如果您可以分享有关您的要求的更多信息，我可以向您展示您需要进行哪些更改。

于 2012-12-29T01:48:58.743 回答
1

可能是这样的：

var groups = {};
$('.myclass').each(function(i, el) {
    var n = $(el).data('n');
    if(!groups[n]) {
        groups[n] = $();
    }
    groups[n] = groups[n].add(el);
});

//At this point the object `groups` has one property per group, 
//each value being a jquery collection comprising members of the group.

//Now the world's your oyster. You can loop through the groups 
//with full access to each group's members if necessary.
$.each(groups, function(groupName, jq) {
    //my function
});
于 2012-12-29T02:07:59.850 回答
1

处理完第一个元素后，您可以在所有组元素上设置某个 HTML 属性。之后，您可以检查该属性的值：

$('.myclass').each(function(){

  if($(this).attr("processed")!="true") {
      // process...
      $("[data-n=" + $(this).attr("data-n")).attr("processed", "true");
  } else {
     // skip, or do something else with the element
  }

});
于 2012-12-29T03:20:02.067 回答
0

您可以使用 jQuery 属性选择器选择每个组，如下所示：

$( '.myclass[data-n="groupX"]' );

我不确定您的意思是不是只想将您的函数应用于每个组中的一个元素，但如果是这样，这只会给您每个组中的第一个：

$( '.myclass[data-n="groupX"]' ).first();

鉴于您将组标记为 1 到 N，您只需检查结果集中是否有任何内容来确定您何时遍历每个组。

于 2012-12-29T01:51:02.187 回答