Basic Filter Selectors
In this page:
$("selector:first")
$("selector:last")
$("selector:even")
$("selector:odd")
$("selector:eq(index)")First Filter
किसी selector में :first जोड़ना multi-element match को document order में सिर्फ बिल्कुल पहले element तक narrow कर देता है। यह :eq(0) इस्तेमाल करने के बराबर है लेकिन ज़्यादा साफ़ पढ़ा जाता है।
क्योंकि jQuery base selector चलने के बाद filters evaluate करता है, :first को अभी भी narrow करने से पहले jQuery को हर match ढूँढना पड़ता है।
उदाहरण: First Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:first").text());
</script>
</body>
</html>Last Filter
:last filter :first का mirror image है -- यह document order में सिर्फ आख़िरी matching element रखता है, उससे पहले के हर match को discard करते हुए। यह आमतौर पर किसी base selector के साथ combine किया जाता है, जैसे 'li:last', किसी specific list का आख़िरी item लेने के लिए।
उदाहरण: Last Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:last").text());
</script>
</body>
</html>Even और Odd
':even' और ':odd' zero-based indexing इस्तेमाल करते हैं, इसलिए ':even' असल में visually 1st, 3rd, 5th... elements select करता है, क्योंकि index 0 even count होता है -- beginners के लिए off-by-one confusion का एक common कारण।
उदाहरण: Even and Odd
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li><li>D</li>
<script>
$("li:even").css("background", "yellow");
</script>
</body>
</html>Equal Filter
':eq(n)' match set में एक specific zero-based position पर एक single element select करता है, आपको precise control देते हुए जब :first और :last काफ़ी specific न हों। क्योंकि positions zero-based हैं, :eq(2) असल में तीसरा matching element select करता है, दूसरा नहीं।
उदाहरण: Equal Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:eq(2)").text());
</script>
</body>
</html>Not Filter
':not(selector)' inner selector से match होने वाले किसी भी element को result से exclude कर देता है, आपको एक ही expression में किसी particular group को छोड़कर 'बाकी सब कुछ' select करने देते हुए। यह अपने markup में manually exclude किए बिना 'currently active वाले के अलावा हर button' style करने के लिए खासतौर पर काम का है।
उदाहरण: Not Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="active">A</button><button>B</button><button>C</button>
<script>
$("button:not(.active)").css("opacity", "0.5");
</script>
</body>
</html>- यह मानना कि
:even2nd, 4th, 6th items select करता है, जबकि indexes 0 से शुरू होते हैं इसलिएli:even1st, 3rd और 5th को match करता है। - पहले item की उम्मीद में
:eq(1)इस्तेमाल करना; indexes zero-based हैं, इसलिए:eq(0)पहला है। - हर list के पहले item के लिए
$("li:first")लिखना, जबकि यह पूरे page पर सिर्फ एक element return करता है;:first-childप्रति parent एक को match करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: