Führen Sie jedes für eine Klasse, aber einmal für Gruppe

Question

Ich habe viele Elemente mit der gleichen Klasse. Diese Elemente werden in Gruppen durch Attribut „Daten-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> 
... 
... 

Wie eine Funktion für jedes Element ausführen, aber nur einmal in jeder Gruppe so etwas wie dies mit?

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

/// My function 

}); 

Answer 1

Arbeitsbeispiel: 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')); 
     } 
    }); 
}); 

Ich gehe davon aus, dass Sie nur diese müssen beim Laden der Seite einmal laufen. Wenn Sie mehr über Ihre Anforderungen erfahren möchten, kann ich Ihnen zeigen, welche Änderungen Sie vornehmen müssen.

Answer 2

Sie können jede Gruppe mit dem Attribut Selektor jQuery wählen aus, wie folgt aus:

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

Ich bin nicht sicher, ob Sie bedeutet, dass Sie nur Ihre Funktion ein Element in jeder Gruppe anwenden wollte, aber wenn so gibt dies nur die ersten in jedem:

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

Vorausgesetzt, dass Sie Ihre Gruppen 1 bis N beschriften können Sie einfach überprüfen, ob es etwas in der ist Ergebnismenge zu bestimmen, wenn Sie durch jede Gruppe geschlungen haben.

Answer 3

So etwas wie dies vielleicht:

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 4

Sie können nach der Verarbeitung des erst man ein bestimmtes HTML-Attribut für alle Gruppenelemente gesetzt. Danach können Sie den Wert dieses Attributs überprüfen: