web-dev-qa-db-ja.com

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

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

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
jqueryjquery-selectors
253
usertest
$("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();

等々。

見る：

546
karim79

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)よりも数パーセント遅いだけですが、「最初のもの以外はすべて欲しい」と非常に読みやすいです。

28
Gone Coding

私の答えは、上部で公開されたケースから派生した拡張ケースに焦点を当てています。

最初以外の子要素を非表示にする要素のグループがあるとします。例として：

<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>

  1. すべてのグループのすべての.child要素を非表示にします。したがって、これは.childを除くすべてのvisible#1要素を非表示にするため、役に立ちません。

    $('.child:not(:first)').hide();

  2. ソリューション（この拡張された場合）は次のようになります。

    $('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});
3
christian
$(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>
1
Rafiqul Islam