jQuery를 사용하여 주어진 클래스의 나머지 요소를 어떻게 확인할 수 있습니까?

Question

버튼 목록이 있다고 가정 해 보겠습니다. 각 버튼은 클래스 ".button"에 속합니다. 각 버튼은 선택한 상태로 시각적으로 나타납니다. 각 버튼에는 해당 함수와 연결되는 스타일 클래스가 있습니다. ".widget-1", ".widget-2", 따라서 <div class="button widget-1"> 등등. 단추를 클릭하면 다음을 수행합니다. $(this).addClass("selected")

나는 임의의 수의 단추가 있으며, 주어진 시간에 정확히 얼마나 많은 단추가 있을지 알지 못합니다. 목록은 데이터 기반이고 크기가 지정되고 스타일이 지정되어 있습니다. 런타임시 동적으로.

그러나 조건 하나만 버튼을 남긴다 때 충족되지 않은 틱, 즉;해야하는 경우가있다 ".selected"클래스가없는 버튼 하나.

for (var n = 0; n < Math.round(Math.random() * 10); n++) { 
    $('<button />').attr({class: 'button widget-' + n}) 
    .appendTo('body') 
    .click(function(){ 
     $(this).addClass('selected'); 
     // Am I the last .button without .selected class? 
    }); 
} 

이가 생각보다 까다 롭습니다 : 각 버튼은 동급의 다른 임의의 버튼을 쳤다 때까지이 마지막 알 수 없습니다 것을 깨닫게

는 설명을 위해 다음과 같은 코드를 생각해 보자.

도움이 필요하십니까?

Answer 1

클릭 핸들러 본문을이 코드 블록으로 바꾸면 다른 버튼이 선택되어 있는지 확인합니다. "선택"클래스와 버튼의 컬렉션의 크기가 클릭 된 버튼을 선택한 클래스를 추가 한 후 제로의 경우

$(this).addClass('selected'); 
if($('button.selected').length == 0) { 
    alert("This is the last button"); 
} 

는, 당신은 마지막 알고있다.

이제 '버튼'클래스가있는 버튼 ('선택한 클래스가없는 마지막 버튼이 맞나요') 만 계산할 것인지, 아니면 모든 버튼 요소를 계산하려고합니다. "버튼"클래스의 버튼 만 계산하려면 다음을 사용하십시오.

$(this).addClass('selected'); 
if($('button.button.selected').length == 0) { 
    alert("This is the last button"); 
}