פעולות חוזרות באמצעות המתודה jQuery.each
אחת המתודות השימושיות ביותר שמציע jQuery היא jQuery.each() שיודעת לבצע פעולות חוזרות על מערכים ואובייקטים. במדריך זה אציג שלוש דוגמאות להפעלה של jQuery.each(), אחת על מערך, אחת על אובייקט, ודוגמה שלישית מאפשרת לנו להוסיף class לקישורים פעילים בתפריט.
המבנה הכללי של המתודה ()jQuery.each הוא הבא:
$.each(array, function(index, value) {
//משהו לעשות שוב ושוב
});
המתודה מקבלת את שמו של המערך או האובייקט שאתו היא עובדת, ובנוסף ערכים של index ו-value שמתעדכנים בכל פעם שהלולאה רצה. המתודה תרוץ מספר פעמים כמספרם של האלמנטים במערך, ובכל חזרה תבצע פעולות על הערכים שמספק המערך (value) ועל מספר החזרה (index). צריך רק לשים לב שמתחילים לספור מאפס.
לדוגמה, המערך הבא:
var hebLetters = [ 'הי' , 'דלת' , 'גימל' , 'בית' , 'אלף' ];
| מספר החזרה | אינדקס | ערך |
|---|---|---|
| 1 | 0 | אלף |
| 2 | 1 | בית |
| 3 | 2 | גימל |
| 4 | 3 | דלת |
| 5 | 4 | הי |
דוגמה ראשונה: הפעלת jQuery.each() על מערך
כדי לראות את הדגמה של הקוד, לחצו על הכפתור:
כדי ליצור את הפונקציונליות הזו, נתחיל מיצירת מבנה של הטמ"ל שכולל בתוכו כפתור, ואלמנט של רשימה לא מסודרת ul, שלתוכו נדביק את התוכן.
<html>
<head>
<meta charset="WINDOWS-1255">
</head>
<body>
<button id='button1'>להדגמה</button>
<ul id='text'>
</ul>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
//הסקריפט שלנו כאן
</script>
</body>
</html>
שימו לב, שתגיות הסקריפט נמצאות מתחת לכל התכנים בדף כדי לשפר את זמן הטעינה של הדף, ולחסוך בפקודות.
בין תגיות הסקריפט, ניצור את המערך שאתו נעבוד, ואת המעטפת של ה-jQuery:
<script>
(function($) {
var hebLetters = [ 'הי' , 'דלת' , 'גימל' , 'בית' , 'אלף' ];
//הקוד פה
})(jQuery);
</script>
נוסיף לסקריפט את המאזין ללחיצה על הכפתור (למדריך אירועים ב-jQuery), שבתוכו נשבץ את הפונקציה $.each, שפועלת על המערך. כדי לחסוך במשאבים, נאחסן את האלמנטים של הטמ"ל שאיתם אנחנו עובדים במשתנים.
<script>
(function($) {
//המערך שאתו נעבוד
var hebLetters = [ 'הי' , 'דלת' , 'גימל' , 'בית' , 'אלף' ];
//האלמנט שאליו נדביק את ההטמ"ל שנייצר
var divToAppendText = $('#text'),
//הכפתור
button1 = $('#button1');
//לחיצה על הכפתור מפעילה את הפונקציה
button1.on('click',function(){
$.each(hebLetters, fnction(index, value) {
//פעולות על המערך
});
});
})(jQuery);
</script>
נוסיף את האלמנטים של הטמ"ל שאנחנו רוצים שייוצרו מהמערך בכל פעם שהלולאה רצה, ונעטוף את הכול בתוך setTimeout, שמאפשר השהייה של שנייה בין כל חזרה. ההדבקה לדף ההטמ"ל נעשית באמצעות המתודה .append()
$.each(hebLetters, function(index, value) {
setTimeout(function () {
//משתנה שמכיל את התוכן ומתעדכן בכל חזרה
text = (index+1) + "#" + " הוא " + value;
//עוטפים את המשתנה שיצרנו בתוך תגיות הטמ"ל, ומדביקים בדף
divToAppendText.append("<li>"+text+"</li>");
}, index * 1000);
});
לסיכום, הקוד המלא:
<script>
(function($) {
var hebLetters = [ 'הי' , 'דלת' , 'גימל' , 'בית' , 'אלף' ];
var divToAppendText = $('#text'),
button1 = $('#button1'),
speed = 1000;
button1.on('click',function(){
$.each(hebLetters, function(index, value) {
setTimeout(function () {
text = (index+1) + "#" + " הוא " + value;
divToAppendText.append("<li>"+text+"</li>");
},index*speed);
});
//מונע את הפעלת הפונקציה יותר מפעם אחת בשל לחיצות נשנות על הכפתור
$(this).attr('disabled','disabled');
});
})(jQuery);
</script>
דוגמה שנייה: הפעלת jQuery.each() על אובייקט
הקוד הבא עושה בדיוק את אותו דבר, אבל משתמש באובייקט, במקום במערך. באובייקטים האינדקס (index) הוא מה שמופיע משמאל לנקודתיים, והערך (value) הוא מה שמופיע מימין.
<script>
(function($) {
//הדגמה על אובייקט
var hebLetters = { 1:'alef', 2:'bet', 3:'gimel', 4:'dalet', 5:'hey' };
var divToAppendText = $('#text'),
button1 = $('#button1');
button1.on('click',function(){
$.each(hebLetters, function(index, value) {
setTimeout(function () {
text = index + " הוא " + value;
divToAppendText.append("<li>"+text+"</li>");
},index * 1000);
});
$(this).attr('disabled','disabled');
});
})(jQuery);
</script>
דוגמה שלישית: הוספת class מיוחד לקישורים פעילים בתפריט
הקוד הבא, לוקח את שם הדף משורת הכתובות ומשווה אותו עם השם שקיים בכל כפתור בתפריט, ואם הוא מוצא התאמה אז הכפתור מקבל את ההגדרה class='active' . מה שמאפשר עיצוב מיוחד לקישורים פעילים.
ניצור את ההטמ"ל את של התפריט באופן הבא. נקפיד שהשם שמופיע בתפריט יהיה זהה לכתובת הדף. לדוגמה, שכתובת דף הבית תהיה ביתwww.mysitename/, ובהתאם שהכיתוב "בית" יופיע על הכפתור בתפריט.
ההטמ"ל:
<div id="navigation">
<a href="www.mysitename/בית" class="button">בית</a>
<a href="www.mysitename/בלוג " class="button">בלוג</a>
<a href="www.mysitename/אודות" class="button">אודות</a>
<a href="www.mysitename/צור קשר " class="button">צור קשר</a>
</div><!--end navigation bar-->
קוד ה-javascript הבא יאפשר לנו לקבל את כתובת הדף משורת הכתובות:
var pathname = window.location.pathname,
pathArray = pathname.split( '/' ),
pageName = pathArray[1];
חלקו הבא של הקוד לוקח את ההטמ"ל של הכפתורים בתפריט באמצעות המתודה ()html , ואם הוא מוצא התאמה של השם לכתובת הדף, הוא מוסיף לכפתור את המחלקה:active , ויוצא מהלולאה באמצעות return.
(function($) {
$.each($('.button'), function(index)
{
if(pageName == $(this).html())
{
$(this).addClass('active');
return;
});
})(jQuery);
הדגמה של האפקט של הסקריפט:
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.