נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

פעולות חוזרות באמצעות המתודה 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="http://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);

 

הדגמה של האפקט של הסקריפט:

 

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 3 + 8