.filter() के साथ उन्नत फ़िल्टरिंग
.filter() विधि की पूरी क्षमता का अन्वेषण करें, कस्टम तर्क लागू करने के लिए फ़ंक्शन का उपयोग करें और गतिशील गुणों या संबंधों के आधार पर एलिमेंट चुनें।
.filter() के साथ उन्नत फ़िल्टरिंग, CoddyKit पर jQuery Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह jQuery Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
.filter() से Selections को बेहतर बनाना
jQuery में .filter() method पहले से चुने गए elements के समूह को सीमित करने का एक शक्तिशाली तरीका है। यह केवल उन elements को बनाए रखने में सहायता करता है जो विशेष मानदंडों से match करते हैं।
इसे selection की दूसरी परत समझिए, जिसे शुरुआती selection के बाद लागू करके अधिक सटीकता प्राप्त की जाती है।
Selectors से Basic Filter
.filter() का उपयोग करने का सबसे सरल तरीका CSS selector string देना है। यह सामान्य selector की तरह ही काम करता है, लेकिन केवल आपके वर्तमान jQuery set में पहले से मौजूद elements पर लागू होता है।
आइए class .item वाले सभी divs चुनें, फिर उन्हें filter करके केवल वे रखें जिनमें class .active भी हो।
<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>
<div class="item active">Item 4</div>
<script>
$(document).ready(function(){
// Select all divs with class 'item'
var allItems = $('div.item');
// Then filter to keep only those with class 'active'
var activeItems = allItems.filter('.active');
activeItems.css('color', 'blue');
});
</script>
</body>
</html>Function से Custom Logic
.filter() की वास्तविक शक्ति तब सामने आती है जब आप argument के रूप में कोई function देते हैं। इससे आप अपने selection के प्रत्येक element पर अत्यधिक custom और dynamic logic लागू कर सकते हैं।
- यह function वर्तमान jQuery set के प्रत्येक element के लिए चलता है।
- इसे दो arguments मिलते हैं:
index(set में element की स्थिति) औरelement(वास्तविक DOM element)। - Element को बनाए रखने के लिए
true, और filtered set से हटाने के लिएfalseलौटाएं।
Index Position के आधार पर Filtering
वर्तमान jQuery set में elements की स्थिति के आधार पर उन्हें चुनने के लिए आप अपनी filter function में index argument का उपयोग कर सकते हैं। यह हर दूसरे item या किसी विशेष range को चुनने जैसे कार्यों के लिए उपयोगी है।
आइए हर दूसरे list item (0 से शुरू होने वाले even indices वाले items) को चुनकर highlight करें।
<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function(index) {
// Keep items at even indices (0, 2, 4...)
return index % 2 === 0;
}).css('background-color', 'lightgreen');
});
</script>
</body>
</html>Attributes और Properties के आधार पर
element argument (या function के अंदर $(this)) आपको प्रत्येक DOM element की properties, attributes या text content की जांच करने देता है। इससे अत्यंत विशिष्ट filtering संभव होती है।
यहाँ हम उन सभी list items को खोजेंगे जिनके text में "Important" शब्द है और उन्हें bold बनाएंगे।
<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Task 1</li>
<li>Important Task 2</li>
<li>Task 3</li>
<li>Another Important Task 4</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the text content includes "Important"
return $(this).text().includes('Important');
}).css('font-weight', 'bold');
});
</script>
</body>
</html>Data से Dynamic Filtering
HTML5 के data attributes (जैसे, data-status="active") elements में अतिरिक्त, application-specific जानकारी सीधे संग्रहीत करने के लिए उपयुक्त हैं। इन custom data values के आधार पर elements चुनने के लिए आप .filter() का उपयोग कर सकते हैं।
आइए उनके data-status attribute का उपयोग करके 'complete' के रूप में चिह्नित list items को highlight करें।
<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-status="pending">Task A</li>
<li data-status="complete">Task B</li>
<li data-status="pending">Task C</li>
<li data-status="complete">Task D</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check the 'data-status' attribute
return $(this).data('status') === 'complete';
}).css('text-decoration', 'line-through');
});
</script>
</body>
</html>Child या Parent के आधार पर Filtering
आपकी filter function elements के बीच संबंधों की भी जांच कर सकती है। उदाहरण के लिए, आप ऐसे parent elements चुनना चाह सकते हैं जिनमें कोई विशेष child हो, या इसका उल्टा।
यहाँ हम उन list items को खोजेंगे जिनके भीतर <img> tag है और उनमें border जोड़ेंगे।
<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Text only</li>
<li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
<li>Another text item</li>
<li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the current <li> contains an <img>
return $(this).find('img').length > 0;
}).css('border', '2px solid orange');
});
</script>
</body>
</html>Logic के साथ Complex Filters
अपनी filter function के अंदर आप standard JavaScript logical operators, जैसे && (AND) और || (OR), का उपयोग करके कई conditions को जोड़ सकते हैं।
इससे एक साथ कई मानदंडों के आधार पर बहुत सटीक selections करना संभव होता है और आपकी filtering अत्यंत शक्तिशाली बन जाती है:
- क्या यह visible है? AND क्या इसमें कोई specific class है?
- क्या इसमें 'X' text है? OR क्या इसमें 'Y' data attribute है?
वास्तविक दुनिया में Dynamic Filtering
आइए अब तक सीखी गई बातों को साथ में प्रयोग करें। कल्पना कीजिए कि आप कई मानदंडों के आधार पर products की list filter कर रहे हैं। आपकी filter function कई conditions की dynamic रूप से जांच कर सकती है।
यह उदाहरण combined logic का उपयोग करके उन products को highlight करता है जो visible भी हैं AND 'electronics' category से संबंधित भी हैं।
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="product" data-category="electronics">Laptop</div>
<div class="product hidden" data-category="books">Novel</div>
<div class="product" data-category="electronics">Mouse</div>
<div class="product" data-category="books">Textbook</div>
<script>
$(document).ready(function(){
$('div.product').filter(function() {
// Filter products that are visible AND in 'electronics' category
var isVisible = $(this).is(':visible');
var isElectronics = $(this).data('category') === 'electronics';
return isVisible && isElectronics;
}).css('background-color', 'lightblue');
});
</script>
</body>
</html>Filter चुनौती
दिए गए HTML <li class="item special" data-value="10">...</li> के लिए, कौन-सा .filter() function केवल उन li elements को सही ढंग से चुनता है जिनमें class .special AND 5 से अधिक data-value हो?
पुनरावलोकन: Dynamic Filtering की शक्ति
अब आपने jQuery के .filter() method के उन्नत उपयोगों में महारत हासिल कर ली है!
- यह मौजूदा selections को refine करके सटीक नियंत्रण प्रदान करता है।
- Function का उपयोग dynamic और जटिल filtering logic को संभव बनाता है।
- आप indices, element properties, data attributes और relationships की जांच कर सकते हैं।
- अत्यंत विशिष्ट मानदंडों के लिए
&&(AND) और||(OR) के साथ कई conditions को जोड़ सकते हैं।
यह शक्तिशाली method आपको अत्यंत responsive और data-driven user interfaces बनाने देता है।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “ .filter() के साथ उन्नत फ़िल्टरिंग” पाठ निःशुल्क है?
हाँ — jQuery Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ .filter() के साथ उन्नत फ़िल्टरिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“ .filter() के साथ उन्नत फ़िल्टरिंग” में मैं क्या सीखूँगा?
.filter() विधि की पूरी क्षमता का अन्वेषण करें, कस्टम तर्क लागू करने के लिए फ़ंक्शन का उपयोग करें और गतिशील गुणों या संबंधों के आधार पर एलिमेंट चुनें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या jQuery Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर jQuery Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।
“ .filter() के साथ उन्नत फ़िल्टरिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस jQuery Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर jQuery Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- कस्टम स्यूडो-सिलेक्टर बनाना
- .filter() के साथ उन्नत फ़िल्टरिंग
- .not() से एलिमेंट बाहर करना