Uruchamiaj każdą klasę, ale raz dla grupy

Question

Mam wiele elementów z tą samą klasą. Elementy te są podzielone na grupy za pomocą atrybutu „danych-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> 
... 
... 

Jak wykonać funkcję na każdej pozycji, ale tylko raz w każdej grupie, używając coś takiego?

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

/// My function 

}); 

Answer 1

przykład robocza: 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')); 
     } 
    }); 
}); 

Jestem zakładając, że wystarczy to, aby uruchomić raz na stronie obciążenia. Jeśli możesz podzielić się większą wiedzą na temat swoich wymagań, mogę pokazać, jakie zmiany należy wprowadzić.

Answer 2

Można wybrać z każdej grupy z selektora atrybutu jQuery, tak:

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

Nie jestem pewien, czy masz na myśli, że tylko chciał zastosować swoją funkcję do jednego elementu w każdej grupie, ale jeśli tak, to daje tylko pierwszy w każdy:

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

Biorąc pod uwagę, że etykiecie grup od 1 do N można po prostu sprawdzić, czy jest coś w powstałym ustawić, aby określić, kiedy mają przelotowe każdej grupy.

Answer 3

Coś takiego może:

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

Można ustawić pewien atrybut HTML na temat wszystkich elementów grupy po przetworzeniu pierwszego. Następnie możesz sprawdzić wartość tego atrybutu:

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

});