クラスごとに1回、グループに1回実行する

Question

私は同じクラスの要素がたくさんある。これらの要素は、このようなものを使用して各アイテムで機能を実行するためにどのように属性によってグループに「データ-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 

}); 

Answer 1

の作業例：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')); 
     } 
    }); 
}); 

私はあなたがこれだけは、ページの読み込みで一度実行する必要があると仮定しています。あなたの要件についてもっと分かち合うことができたら、あなたは何を変えなければならないのかをあなたに示すことができます。あなたはjQueryの属性セレクタと、各グループを選択することができます

Answer 2

、次のように：

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

私はあなたが唯一の各グループ内の1つの要素に、あなたの関数を適用したいことを意味かどうかわからないんだけど、そう、これはそれぞれにあなたが最初与える場合：

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

はあなたがすべてのグループを介してループしているときを決定するために設定され、得られに何があるかどうかあなただけ確認することができますNを通して、あなたのグループ1にラベルを付けることを考えます。あなたが最初のものを処理した後、すべてのグループ要素に特定のHTML属性を設定することができます

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

Answer 3

何か。その後、その属性の値を確認することができます。

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

}); 

Answer 4

：多分このような