jQuery.map - फ़ंक्शन के लिए व्यावहारिक उपयोग?

Question

मैं jQuery.map फ़ंक्शन की बेहतर समझ प्राप्त करने का प्रयास कर रहा हूं।

तो सामान्य शब्दों में। Map एक सरणी लेता है और इसे "मैप्स" आइटमों की एक और सरणी में ले जाता है।

आसान उदाहरण: [4,5,6]

में

$.map([0,1,2], function(n){ 
    return n+4; 
}); 

परिणाम मुझे लगता है कि मैं समझता हूँ कि यह क्या करता है। मैं चाहता हूं कि किसी को इसकी आवश्यकता क्यों होगी। इस समारोह का व्यावहारिक उपयोग क्या है? आप इसे अपने कोड में कैसे उपयोग कर रहे हैं?

Answer 1

$.map सभी सेट में आइटम को कनवर्ट करने के बारे में है।

जहाँ तक डोम के रूप में, मैं अक्सर इसे जल्दी मेरी तत्वों से मूल्यों बाहर बांधना करने के लिए उपयोग करें:

var usernames = $('#user-list li label').map(function() { 
    return this.innerHTML; 
}) 

ऊपर केवल पाठ उसमें निहित करने के लिए उपयोगकर्ताओं की सूची के अंदर <label> तत्वों बदल देता है। तब मैं कर सकते हैं:

alert('The following users are still logged in: ' + usernames.join(', ')); 

Answer 2

यहां एक चीज है जिसके लिए आप इसका उपयोग कर सकते हैं।

$.map(["item1","item2","item3"], function(n){ 
    var li = document.createElement ('li'); 
    li.innerHTML = n; 
    ul.appendChild (li); 
    return li; 
}); 

Answer 3

मैपिंग में दो मुख्य उद्देश्य हैं: वस्तुओं की एक सरणी से गुणों को पकड़ना, और प्रत्येक आइटम को किसी अन्य चीज़ में परिवर्तित करना।

मान लीजिए आप उन का प्रतिनिधित्व करने में ऑब्जेक्ट की श्रृंखला है:

var users = [ 
    { id: 1, name: "RedWolves" }, 
    { id: 2, name: "Ron DeVera" }, 
    { id: 3, name: "Jon Skeet" } 
]; 

मानचित्रण प्रत्येक आइटम से एक निश्चित संपत्ति हड़पने के लिए एक सुविधाजनक तरीका है। उदाहरण के लिए, आप इसे प्रयोक्ता आईडी की एक सरणी में तब्दील कर सकते हैं:

var ths = $('table tr th'); 

आप उन तालिका की सामग्री संग्रहीत करना चाहते हैं:

var userIds = $.map(users, function(u) { return u.id; }); 

एक और उदाहरण के रूप में, आप तत्वों का एक संग्रह है कहना

var contents = $.map(ths, function(th) { return th.html(); }); 

Answer 4

कोड मान परिवर्तित पाठ कोड करने के लिए एक संभावित उपयोग होगा: बाद में उपयोग के हेडर, आप अपने HTML सामग्री की एक सरणी मिल सकती है। जैसे कि जब आपके पास एक चुनिंदा सूची होती है और प्रत्येक अनुक्रमित मान में एक संबंधित कोड टेक्स्ट होता है।

Answer 5

मानचित्र एक high-order function है, जिन्हें आप किसी एक अनुक्रम करने के लिए कुछ समारोह लागू करने के लिए, एक नया जिसके परिणामस्वरूप लागू किया समारोह के मूल्य के साथ प्रत्येक मूल तत्व के मूल्यों से युक्त अनुक्रम पैदा करने में सक्षम बनाता है।

मैं अक्सर उदाहरण के लिए मेरे सभी jQuery यूआई पैनलों की एक वैध चयनकर्ता प्राप्त करने के लिए इसका इस्तेमाल करते हैं:

var myPanels = $('a').map(function() { 
    return this.hash || null; 
}).get().join(','); 

कि पैनल के एक अल्पविराम से अलग स्ट्रिंग इस तरह वर्तमान पृष्ठ में उपलब्ध वापस आ जाएगी:

"#home,#publish,#request,#contact" 

और वह एक वैध चयनकर्ता कि इस्तेमाल किया जा सकता है:

$(myPanels);// do something with all the panels 

Answer 6

उदाहरण:

$.map($.parseJSON(response), function(item) {  
    return { value: item.tagName, data: item.id }; 
}) 

यहाँ सर्वर "प्रतिक्रिया" JSON प्रारूप में लौटने, $.parseJSON का उपयोग कर इसे जावास्क्रिप्ट वस्तु सरणी JSON ऑब्जेक्ट परिवर्तित द्वारा किया जाएगा।

प्रत्येक वस्तु के मूल्य के लिए $.map का उपयोग करके यह नतीजा मान प्रदर्शित करने के function(item) कॉल करेगा: item.tagName, data: item.id

Answer 7

हाल ही में मैं एक व्यावहारिक सेटिंग में .map का एक उत्कृष्ट उदाहरण की खोज की।

के सवाल को देखते हुए एक selectbox इस सरणी दिया (या किसी अन्य सरणी) के लिए विकल्प कैसे जोड़ें:

selectValues = { "1": "test 1", "2": "test 2" }; 

this StackOverflow answer.map उपयोग करता है:

$("mySelect").append(
    $.map(selectValues, function(v,k) { 
    return $("<option>").val(k).text(v); 
    }) 
);