모든 인스턴스를 타겟팅하지 않는 슬라이스

Question

내 페이지 전체에 걸쳐 일련의 스팬이 있는데, 여기에서 클래스를 사용하여 다양한 스타일을 제어하고 있습니다. 조건이 변경되면 해당 클래스에 변경 사항을 동시에 적용하려고합니다.

예 :

<SPAN class="zrow_1">...</SPAN> 
<SPAN class="zrow_2">...</SPAN> 
<SPAN class="zrow_3">...</SPAN> 

... ... 페이지 ... 아래 더 많은 코드 ... 이제

<SPAN class="zrow_1">...</SPAN> 
<SPAN class="zrow_2">...</SPAN> 
<SPAN class="zrow_3">...</SPAN> 

은 내가 개별적으로 각 클래스를 타겟팅 할 수 있습니다 알고 그건 잘 작동합니다. 하지만 내 코드를 정리하고 시간을 절약하기 위해 슬라이스를 사용하려고했습니다.

$("SPAN[class^='zrow_']").slice(2).css({'display': 'none'}); 

위의 내용은 원하는대로 전체 페이지를 숨기는 페이지의 첫 번째 인스턴스에 적용됩니다. 그러나 두 번째 집합은 그렇지 않습니다. 내가 뭔가 잘못하고 있는거야?

Answer 1

슬라이스를 사용하면 각 요소 그룹이 아닌 전체 페이지에서 처음 두 결과 만 가져옵니다. 나는 이것에 대한 .filter을 사용합니다 :

$("SPAN[class^='zrow_']").filter(function() { 
    return parseInt($(this).prop("class").substring(5),10) <= 2; 
}).hide(); 

이 모든 zrow_1 및 zrow_2 요소를 반환합니다. 액션을 적용하려는 많은 요소에 하드 코딩 된 2을 변경할 수 있습니다.

Example jsFiddle

Answer 2

나는 문제가 무엇인지 볼 수 있었다. slice의 인덱스는 0부터 시작합니다.

확인 : https://api.jquery.com/slice/.

$ ("SPAN [class^= 'zrow _']"). 슬라이스 (2) .css ({ 'display': 'none'})를 변경하십시오. ~

$ ("SPAN [class^= 'zrow _']") 슬라이스 (1) .css ({ '디스플레이': '없음'}); 그게 효과가있다.

감사합니다.

Answer 3

당신이 갖고있는 셀렉터가 6 개 모두를 반환 할 것이기 때문에 그것은 두 개를 숨기고 있기 때문입니다.

나는 클래스 이름과 함께 쉼표로 구분합니다.

$("span.zrow_1, span.z_row_2").css({'display': 'none'});