jQueryは最初を除いてすべてを選択します

272

jQueryでは、セレクターを使用して要素の最初以外のすべてにアクセスするにはどうすればよいですか？したがって、次のコードでは、2番目と3番目の要素のみにアクセスします。手動でアクセスできることはわかっていますが、要素がいくつあってもかまいません。ありがとう。

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

jquery jquery-selectors

— ユーザーテスト
ソース

この回答を見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();

等々。

見る：

— karim79
ソース

19

ここでは、これらすべてのソリューションを比較JsPerfです：jsperf.com/fastest-way-to-select-all-expect-the-first-oneは、アイテムの数に応じて、$("li").not(":eq(0)")良いと思われます。

— ダミアン

4

このリストが大好きです。追加したかっただけです：$("div.test:first").siblings().hide()。最初の要素から始めて、共通のセレクターで見つからない場合でも、すべての兄弟を非表示にすると便利です。

— Levi

2

素晴らしいリスト！ただし、ほんの少しのコメントです。少なくとも私が使用しているバージョンでは、gtはもはやJQuery関数ではないと思います。TypeErrorが発生する：.gtは関数ではありません。

— ドレー

1

$("div.test").slice(1).hide();空の選択の場合に最も寛容に見える...

— フランクノッケ

1

@SandyGiffordには、テストクラスにない兄弟が含まれていませんか？兄弟ではないテストクラスの要素を見逃していませんか？

— ボブスタイン

30

jQueryセレクターがright-to-leftで評価される方法のため、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>

スニペットを展開

— ラフィクル・イスラム
ソース