jQuery भ्रमण - filter() विधा

jQuery बाइटरनिंग हैंडबुक

उदाहरण

सभी div का रंग बदलें और श्रेणी नाम "middle" के लिए किनारा जोड़ें:

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

अपने आप साफ़ी साफ़ी आज़माएं

परिभाषा और उपयोग

filter() तरीका एलिमेंट के सेट को चयनकर्ता के मेल खाते एलिमेंट के सेट में घटाता है。

व्याकरण

.filter(चयनकर्ता)
पारामीटर वर्णन
चयनकर्ता शब्दयोजना मूल्य, जो वर्तमान एलिमेंट सेट को मेल खाते चयनकर्ता एक्सप्रेशन को दर्शाता है。

विस्तृत स्पष्टीकरण

यदि DOM एलिमेंट सेट को प्रस्तुत करने वाला jQuery ऑब्जेक्ट दिया गया है, तो .filter() तरीका .filter() का उपयोग करके एक नया jQuery ऑब्जेक्ट बनाता है जो मेल खाते एलिमेंट के उपसमूह को दर्शाता है। उपयोग की जाने वाली चयनकर्ता प्रत्येक एलिमेंट पर परीक्षण करती है; चयनकर्ता के साथ मेल खाते सभी एलिमेंट नतीजा में शामिल होते हैं。

यहाँ सरल सूची वाली पृष्ठ को सोचिए:

<ul>
  <li>सूची आइटम 1</li>
  <li>सूची आइटम 2</li>
  <li>सूची आइटम 3</li>
  <li>सूची आइटम 4</li>
  <li>सूची आइटम 5</li>
  <li>सूची आइटम 6</li>
</ul>

हम इस लिस्ट आइटम सेट पर इस तरीके को लागू कर सकते हैं:

$('li').filter(':even').css('background-color', 'red');

अपने आप साफ़ी साफ़ी आज़माएं

इस फ़ोन्ट का परिणाम है कि प्रोजेक्ट 1, 3, 5 का पृष्ठभूमि रंग लाल कर दिया गया है क्योंकि वे सभी चयनकर्ता के साथ मेल खाते हैं (याद रखें कि :even और :odd दोनों 0 के आधार पर index का उपयोग करते हैं)。

फ़िल्टर फ़ंक्शन

इस तरीके का दूसरा रूप यह है कि फ़ंक्शन के द्वारा नहीं बल्कि चयनकर्ता के द्वारा एलिमेंट फ़िल्टर करें। प्रत्येक एलिमेंट के लिए अगर फ़ंक्शन true बदले, तो एलिमेंट फ़िल्टर रशी में शामिल होगा; अन्यथा इसे बाहर रखा जाएगा。

यहाँ थोड़ा जटिल लगने वाला HTML फ़्रेम को देखें:

<ul>
  <li><strong>सूची</strong> आइटम 1 - एक strong टैग</li>
  <li><strong>सूची</strong> आइटम <strong>2</strong>
   - दो <span>strong टैग</span></li>
  <li>सूची आइटम 3</li>
  <li>सूची आइटम 4</li>
  <li>सूची आइटम 5</li>
  <li>सूची आइटम 6</li>
</ul>

हम इन सूची आइटम्स को चुन सकते हैं और उनके सामग्री के आधार पर उन्हें फ़िल्टर कर सकते हैं:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

jQuery बाइटरनिंग हैंडबुक