ה כל אחד() מתודה ב-jQuery מציינת פונקציה שפועלת עבור כל אלמנט מותאם. זוהי אחת משיטות המעבר הנפוצות ב-JQuery. באמצעות שיטה זו, אנו יכולים לעבור על רכיבי ה-DOM של אובייקט jQuery ויכולים לבצע פונקציה עבור כל רכיב מותאם.
ה כל אחד() מקבל פרמטר function (אינדקס, אלמנט) שהיא פונקציית callback שפועלת עבור כל אלמנט שנבחר. פונקציה זו דורשת אופציונלית שני פרמטרים שהם אינדקס ואלמנט. לכן, עלינו להעביר פונקציית callback לשיטת each() .
אנחנו יכולים גם לחזור שֶׁקֶר מפונקציית ההתקשרות חזרה כדי לעצור את הלולאה מוקדם.
תחביר
$(selector).each(function(index, element))
ערכי פרמטרים
ערכי הפרמטרים המשמשים ב כל אחד() השיטה מוגדרות כדלקמן.
function(index, element): זה פרמטר חובה. זוהי פונקציית התקשרות חוזרת שפועלת עבור כל אלמנט שנבחר. יש לו שני ערכי פרמטרים המוגדרים כדלקמן.
קבצי לינוקס
בוא נראה כמה איורים כדי להבין את כל אחד() שיטה ברורה.
דוגמה1
בדוגמה זו, ה כל אחד() השיטה תופעל בלחיצה על הכפתור. אנו מיישמים שיטה זו על זֶה אלמנטים. אז, שיטה זו תחזור על כל אחת מהן זֶה אֵלֵמֶנט. הפונקציה מבוצעת עבור כל בחירה זֶה ומציג את הטקסט של המתאים זֶה אלמנט באמצעות תיבת התראה.
כאן, אנחנו לא משתמשים בערכי הפרמטרים של פונקציית ה-callback.
jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $('li').each(function(){ alert($(this).text()) }); }); } תְפוּקָה
הצטרפות למחרוזת javaבדוק את זה עכשיו
לאחר ביצוע הקוד לעיל, הפלט יהיה -
בלחיצה על הכפתור, תוצג התראה כדלקמן.
באופן דומה, ארבע תיבות התראה יוצגו בגלל ארבע זֶה אלמנטים.
דוגמה2
בדוגמה זו, אנו משתמשים בערכי הפרמטרים של פונקציית ה-callback שהם אינדקס ו אֵלֵמֶנט .
אנו מיישמים את כל אחד() שיטה על זֶה אלמנטים. אז, השיטה תחזור על רכיבי li החל מהאינדקס 0 . זה יבוצע על כל אחד שנבחר זֶה אלמנט ושנה את צבע הרקע של האלמנט המתאים.
האיטרציה נעצרת ברגע שהפונקציה חוזרת שֶׁקֶר . הנה, יש שישה זֶה אלמנטים, והפונקציה נעצרת כשהיא מגיעה לאלמנט עם id = 'i4' . אמנם זה האלמנט הרביעי, אבל המדד מתחיל ב 0 , אז המיקום של האלמנט הוא 3 .
jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $('li').each(function(index, element) { $(element).css('background', 'lightgreen'); if ($(this).is('#i4')) { $('p').text('Index begins with 0. So, the function stopped at position: ' + index ).css('fontSize', '20px'); return false; } }); }); } תְפוּקָה
בדוק את זה עכשיולאחר ביצוע הקוד לעיל, ולחיצה על הכפתור הנתון, הפלט יהיה -
