Mapping और Arrays में Convert करना
In this page:
var array = $(selector).map(function (index, element) {
return value;
}).get();map()
.map() किसी selection के हर element पर एक function चलाता है और return की गई values को एक बिल्कुल नए jQuery object में collect करता है। each() के उलट, जो side effects के लिए है, map() हर element को किसी दूसरी value में transform करने के लिए है।
उदाहरण: map()
<!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>
const texts = $("li").map(function() {
return $(this).text();
}).get();
console.log(texts);
</script>
</body>
</html>get()
get() किसी jQuery collection को underlying DOM elements के एक plain JavaScript array में convert करता है, jQuery के wrapper को हटाते हुए। get() को एक index pass करना इसके बजाय उस position पर सिर्फ single raw DOM element return करता है।
उदाहरण: get()
<!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>
const rawArray = $("li").get();
console.log(rawArray[0].tagName);
</script>
</body>
</html>toArray()
toArray() सभी matched DOM elements को एक plain array में convert करता है, functionally बिना किसी arguments के get() call करने के बराबर। जब आपको अपनी selection regular JavaScript array methods को सौंपनी हो तो दोनों में से कोई एक bridge point है।
उदाहरण: toArray()
<!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>
const rawArray = $("li").toArray();
console.log(rawArray.length);
</script>
</body>
</html>map() और Array Methods
get() या toArray() से किसी selection को एक plain array में convert करने के बाद, map, filter, और reduce जैसी normal JavaScript array methods available हो जाती हैं, जिन्हें jQuery का अपना map() पूरी तरह replicate नहीं करता। यह तब उपयोगी है जब आपको array behavior चाहिए जो jQuery सीधे नहीं देता।
उदाहरण: map() and Array Methods
<!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>
const values = $("input").toArray().map(function(el) { return Number(el.value); });
console.log(values.filter(v => v > 10));
</script>
</body>
</html>Mapping Practice
Mapping तब उपयोगी है जब आपको elements के एक set से extract किया गया data चाहिए -- जैसे हर input की value को एक plain array में collect करना -- खुद DOM elements नहीं। यह किसी page के markup को ordinary JavaScript values में बदल देता है जिन्हें आप आगे process कर सकते हैं।
उदाहरण: Mapping Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input value="a"><input value="b">
<script>
const values = $("input").map(function() {
return $(this).val();
}).get();
console.log(values);
</script>
</body>
</html>- values collect करने के लिए
.each()इस्तेमाल करना और खुद एक array बनाना भूल जाना, जबकि.map()पहले से आपके callback से collected values return करता है। .map()के result को एक plain array की तरह treat करना और तुरंत.join()call करना, जबकि यह एक jQuery object return करता है और आपको पहले.get()चाहिए:$("li").map(...).get().join(", ")।.get()call करना और फिर result पर.addClass()जैसी jQuery methods इस्तेमाल करना, जो fail हो जाता है क्योंकि.get()plain DOM elements return करता है, कोई jQuery object नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: