클래스에 대해 각각 하나씩 실행하십시오. 그룹에 대해 한 번만 실행하십시오.

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

당신은이 페이지로드에 한 번 실행해야한다는 것을 가정하고있다. 요구 사항에 대해 더 많이 나눌 수 있다면 변경해야 할 사항을 알려줄 수 있습니다. 당신은 당신이 각 그룹의 한 요소에 함수를 적용하고 싶었을 의미하는 경우

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

잘 모르겠어요,하지만 :

Answer 2

이처럼 jQuery를 속성 선택하여 각 그룹을 선택할 수 있습니다 그래서 이것은 각 당신이 첫 번째 줄 것이다 경우 :

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

당신이이 당신이 모든 그룹을 통해 루프 때 결정하기 위해 설정 결과적 아무것도가 있으면 그냥 확인할 수 N을 통해 그룹 1에 레이블을 감안할 때. 어쩌면이 같은

Answer 3

뭔가 :

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

당신은 첫 번째를 처리 한 후 모든 그룹 요소의 특정 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 
    } 

});