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 लेव की टिप्पणी के अनुसार):

$("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():। पहले तत्व के साथ शुरू करना मेरे लिए उपयोगी पाया गया, फिर अपने सभी भाई-बहनों को यहां तक कि अगर वे एक सामान्य चयनकर्ता के साथ नहीं मिले, तो भी छिपाएं।

— लेवी

2

महान सूची! हालांकि एक छोटी सी टिप्पणी; मुझे नहीं लगता कि gt अब एक JQuery फ़ंक्शन है, कम से कम मेरे द्वारा उपयोग किए जाने वाले संस्करण में नहीं। मुझे एक TypeError मिलती है: .gt कोई फ़ंक्शन नहीं है।

— ड्रे

1

$("div.test").slice(1).hide();खाली चयन के मामले में सबसे क्षमाशील दिखता है ...

— फ्रैंक Nocke

1

@SandyGifford में ऐसे भाई-बहन शामिल नहीं होंगे जो टेस्ट क्लास में नहीं हैं? और उन टेस्ट-क्लास तत्वों को याद करें जो भाई-बहन नहीं हैं?

— बॉब स्टीन

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

यह मेरा पसंदीदा भी है, मुझे यह बहुत साफ और पढ़ने में आसान लगता है। आशय अचूक है।

— ड्रे

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>

स्निपेट का विस्तार करें

— रफीकुल इस्लाम
स्रोत