jQuery는 먼저 제외하고 모두 선택

272

jQuery에서 선택기를 사용하여 첫 번째 요소를 제외한 모든 요소에 액세스하려면 어떻게합니까? 따라서 다음 코드에서는 두 번째 및 세 번째 요소에만 액세스합니다. 수동으로 액세스 할 수는 있지만 가능한 많은 요소가있을 수 있습니다. 감사.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>

jquery jquery-selectors

— usertest
소스

이 답변을보십시오 stackoverflow.com/questions/4831334/…

— AuthorProxy

575

$("div.test:not(:first)").hide();

또는:

$("div.test:not(:eq(0))").hide();

또는:

$("div.test").not(":eq(0)").hide();

또는:

$("div.test:gt(0)").hide();

또는 : (@Jordan Lev의 의견에 따라) :

$("div.test").slice(1).hide();

등등.

보다:

— 카림 79
소스

19

여기에 모든 솔루션을 비교하는 JsPerf입니다 : jsperf.com/fastest-way-to-select-all-expect-the-first-one이 항목의 수에 따라 $("li").not(":eq(0)")좋은 것 같다.

— Damien

4

이 목록을 사랑하십시오. 다음을 추가하고 싶었습니다 $("div.test:first").siblings().hide().. 첫 번째 요소로 시작한 다음 공통 선택기로 찾을 수 없더라도 모든 형제를 숨기는 것이 유용하다는 것을 알았습니다.

— Levi

2

훌륭한 목록! 그래도 작은 의견입니다. 적어도 gt가 JQuery 함수라고 생각하지 않습니다. 적어도 내가 사용하는 버전에는 없습니다. TypeError가 발생합니다. .gt는 함수가 아닙니다.

— Dre

1

$("div.test").slice(1).hide();빈 선택의 경우 가장 용서 보인다 ...

— Frank Nocke

1

@SandyGifford에는 테스트 클래스에없는 형제가 포함되어 있지 않습니까? 그리고 형제가 아닌 테스트 클래스 요소를 그리워합니까?

— Bob Stein

30

jQuery 선택기가 오른쪽에서 왼쪽으로 평가되는 방식으로 인해 li:not(:first)해당 평가로 인해 읽기 속도가 느려집니다.

똑같이 빠르고 읽기 쉬운 솔루션은 기능 버전을 사용하는 것입니다 .not(":first").

예 :

$("li").not(":first").hide();

JSPerf : http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6

이것은 단지 몇 퍼센트 포인트보다 느리지 만 slice(1)"첫 번째 것을 제외한 모든 것을 원합니다"라고 읽을 수 있습니다.

— 사라지다 코딩
소스

1

이것은 내가 가장 좋아하는 것입니다. 매우 깨끗하고 읽기 쉽습니다. 의도는 틀림 없습니다.

— Dre

3

제 답변은 맨 위에 노출 된 사례에서 파생 된 확장 사례에 중점을 둡니다.

첫 번째 요소를 제외하고 하위 요소를 숨기려는 요소 그룹이 있다고 가정하십시오. 예로서:

<html>
  <div class='some-group'>
     <div class='child child-0'>visible#1</div>
     <div class='child child-1'>xx</div>
     <div class='child child-2'>yy</div>
  </div>
  <div class='some-group'>
     <div class='child child-0'>visible#2</div>
     <div class='child child-1'>aa</div>
     <div class='child child-2'>bb</div>
  </div>
</html>

.child모든 그룹의 모든 요소 를 숨기고 싶습니다 . 따라서 다음을 .child제외한 모든 요소 를 숨기므로 도움이되지 않습니다 visible#1.
```
$('.child:not(:first)').hide();
```

솔루션 (이 확장 된 경우)은 다음과 같습니다.

$('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});

— 신자
소스

1

$(document).ready(function(){

  $(".btn1").click(function(){
          $("div.test:not(:first)").hide();
  });

  $(".btn2").click(function(){
           $("div.test").show();
          $("div.test:not(:first):not(:last)").hide();
  });

  $(".btn3").click(function(){
          $("div.test").hide();
          $("div.test:not(:first):not(:last)").show();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn1">Hide All except First</button>
<button class="btn2">Hide All except First & Last</button>
<button class="btn3">Hide First & Last</button>

<br/>

<div class='test'>First</div>
<div class='test'>Second</div>
<div class='test'>Third</div>
<div class='test'>Last</div>

스 니펫 확장

— 라피 둘 이슬람
소스