each() से Iterate करना
$(selector).each(function (index, element) {
// $(this) is the current element
});Basic each()
.each() एक jQuery collection पर एक समय में एक element loop करता है, document order में हर element के लिए एक बार आपका callback function call करते हुए। callback के अंदर, this इस समय visit किए जा रहे raw DOM element को refer करता है।
उदाहरण: Basic each()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function() {
console.log($(this).text());
});
</script>
</body>
</html>Index इस्तेमाल करना
each() के callback को pass किया गया index parameter आपको collection के अंदर current element की zero-based position बताता है। यह तब उपयोगी है जब आप जो action ले रहे हैं वह इस पर निर्भर हो कि कोई element list में कहाँ है, जैसे alternating row colors।
उदाहरण: Using the Index
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function(index) {
console.log(index, $(this).text());
});
</script>
</body>
</html>each() रोकना
each() callback से false return करें loop को जल्दी रोकने के लिए, एक regular for loop में break statement जैसा। इसके बिना, each() खत्म होने से पहले हमेशा collection के हर element को visit करता है।
उदाहरण: Stopping each()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li><li>Three</li>
<script>
$("li").each(function(index) {
if (index === 1) return false;
console.log($(this).text());
});
</script>
</body>
</html>Data के साथ each()
each() तब उपयोगी है जब किसी selection के हर element को अलग data लागू करना हो, जैसे उसकी position या content के आधार पर एक unique data attribute या label set करना। callback आपको आगे बढ़ने से पहले उस एक element के लिए specific कुछ compute करने का मौका देता है।
उदाहरण: each() with Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>One</li><li>Two</li>
<script>
$("li").each(function(index) {
$(this).attr("data-position", index);
});
</script>
</body>
</html>Practical Iteration
each() इस्तेमाल करें जब आपको हर matched element के लिए custom काम चाहिए जिसे किसी built-in jQuery method से express नहीं किया जा सकता, जैसे प्रति element कई property reads को एक calculation में combine करना। जब कोई specific jQuery method पहले से वह नहीं करती जो आपको चाहिए तो यह general-purpose escape hatch है।
उदाहरण: Practical Iteration
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input value="10"><input value="20">
<script>
let total = 0;
$("input").each(function() {
total += Number($(this).val());
});
console.log(total);
</script>
</body>
</html>- loop रोकने की उम्मीद में किसी
.each()callback के अंदरreturn;इस्तेमाल करना, जबकि सिर्फreturn falseही break करता है; एक plain return सिर्फ अगले element पर skip कर देता है। $("li").each(() => $(this).text())जैसा एक arrow function इस्तेमाल करना, जहाँthiscurrent element नहीं है; एक regularfunctionया दूसरा argument इस्तेमाल करें।- callback arguments को
function(element, index)जैसे mix up करना, जबकि jQuery का.each()index को पहले और element को दूसरे pass करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: