קטגוריה: כלי עזר jQuery > פעולות עם מערכים ואובייקטים
jQuery.map( array, callback(elementOfArray, indexInArray) )
מחזירה: מערך
תיאור:מעביר את כל האלמנטים של מערך או של אובייקט כמו מערך למערך אחר.
jQuery.map( array, callback(elementOfArray, indexInArray) )
הוספה בגרסה: 1.0
array
מערך להעברה.
callback(elementOfArray, indexInArray)
כל ערך
פונקציה לעיבוד כל אלמנט. ארגומנט ראשון בתוך הפונקציה הוא אלמנט, וארגומנט השני הוא אינדקס. פונקציה מחזירה כל ערך .
this יהיה אובייקט של החלון גלובלי.jQuery.map( arrayOrObject, callback( value, indexOrKey ) )
הוספה בגרסה: 1.6
מערך או אובייקט להעברה.
callback( value, indexOrKey )
הפונקציה לעיבוד כל פריט. הארגומנט הראשון לפונקציה הוא הערך; הארגומנט השני הוא מדד או מפתח של המערך או מאפיין של האובייקט. הפונקציה יכולה להחזיר ערך כלשהו כדי להוסיף למערך. מערך שחזר יסוכם לתוך מערך שהתקבל. בתוך הפונקציה, זה מתייחס אל האובייקט (חלון) גלובלי.
שיטה $.map() חלה את פונקציה לכל אלמנט במערך, אוספת התוצאות לתוך מערך חדש. לפני jQuery 1.6, פונקציה $.map() תמכה בעברת רק מערכים. החל מ- jQuery 1.6 היא גם מעבירה אובייקטים.
מערך דמוי אובייקט - אלה עם תכונה .length ו- ערך של אינדסק .length - 1 — חייב להיות מומר במערכים בפועל בטרם עבר $.map(). ספריה jQuery מספקת $.makeArray() להמרה כזו.
// The following object masquerades as an array.
var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};
// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )
// Now it can be used reliably with $.map()
$.map( realArray, function(val, i) {
// do something
});
פונקציה העברה, שמסופקת בשיטה הזו מופעלת עבור כל אלמנט של רמה עיליונה במערך ושולחת שני ארגומנטים: ערך של אלמנט ואינדקס שלו או מפתח בתוך מערך או אובייקט.
פונקציה יכולה להחזיר:
- ערך שנשלח, שיוצג במערך התוצאה
null, כדי למחוק אלמנט- מערך ערכים, שיכנס לתוך מערך מלא
דוגמאות
דוגמה 1
שתי דוגמאות של שימוש ב-.map()
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ var arr = [ "a", "b", "c", "d", "e" ] $("div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", ")); }); </script> <style> div { color:blue; } p { color:green; margin:0; } span { color:red; } </style> </head> <body> <div></div> <p></p> <span></span> </body> </html>
דוגמה 2
משנה את מערך המקור למערך חדש, תוך כדי הוספת 4 לכל ערך.
$.map( [0,1,2], function(n){
return n + 4;
});
[4, 5, 6]
דוגמה 3
משנה את מערך המקורי למערך חדש ומוסיף לכל ערך 1 אם הערך גדול מאפס, אחרת ערך נמחק.
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
[2, 3]
דוגמה 4
משנה מערך מקורי לתוך חדש. במערך החדש יחד נמצאים ערכים ישנים ואותם ערכים בתוספת 1.
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
[0, 1, 1, 2, 2, 3]
דוגמה 5
משנה את מערך הישן לחדש, כל אלמנט בריבוע.
$.map( [0,1,2,3], function (a) { return a * a; } );
[0, 1, 4, 9]
דוגמה 6
מוחק אלמנטים על ידי החזרתnull מפונקציה.
היא מוחקת כל המספרים קטנים מ-50, ואחרים מקטין ב-45.
$.map( [0, 1, 52, 97], function (a) { return (a > 50 ? a - 45 : null); } );
[7, 52]
דוגמה 7
כדי להגדיל מערך תוצאה מוחזר מערך בתוך הפונקציה.
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
return [a - 45, index];
});
[-45, 0, -44, 1, 7, 2, 52, 3]
דוגמה 8
מעביר מפה של אובייקט מקורי למערך חדש ומכפיל כל ערף.
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
return value * 2;
});
[20, 30, 40]
דוגמה 9
מעבירה מפת מפתחות של אובייקט למערך
var dimensions = { width: 10, height: 15, length: 20 },
keys = $.map( dimensions, function( value, index ) {
return index;
});
["width", "height", "length"]
האם מידע זה היה מועיל?
