jQuery – מעבר בין אלמנטים: Traversing

במאמר הקודם למדנו על איך jQuery מבצעת שינויים בתכונות – attributes. במאמר הזה נלמד על Traversing, מעבר בין אלמנטים ובחירה של אלמנטים ספציפיים. נכון, כבר דנו בנושא הסלקטורים שאמורים לאפשר לנו בחירה מדויק באמצעות id או class, אבל במציאות בדפי אינטרנט יש עשרות ואף מאות אלמנטים שלאו דווקא לכל אחד מהם יש id משלו או מקום ייחודי משלו ב-DOM. הדוגמא הטובה ביותר היא רשימה ארוכה שבכל אחד מפריטיה יש קישור אחד (או יותר) כיצד אפשר להגיע דווקא לקישור השלישי? או לפריט הרביעי? ואם אני רוצה דווקא לבחור את הפריטים הלא זוגיים?

לכל המקרים האלו jQuery נותנת מענה באמצעות פונקציות המוקדשות למעבר בין אלמנטים או Traversing. את כל הפונקציות שיש אני אדגים באמצעות רשימה שיש בה 3 פריטים שבכל אחד מהם יש קישור. כדרכנו בקודש יהיה כפתור, שיפעיל את הפונקציה שתבחר את האלמנטים המבוקשים ותצבע אותם באדום באמצעות פונקצית css שאודותיה למדנו במאמר שהוקדש לפונקציות css של jQuery.

בחירת אלמנט לפי מספר

בואו ונניח שיש לי רשימה, וברשימה יש 3 פריטים. ונניח שאני רוצה להפוך דווקא את הפריט השני לאדום. כיצד אעשה זאת? אני יכול לבחור את כל הפריטים ברשימה באמצעות הסלקטור $('li') אבל כיצד אבודד את הפריט השלישי? לשם כך יש לנו את פונקצית eq(). ראשית אני בוחר עם הסלקטור את כל הרשימה ואז אני מפעיל את הפונקציה באופן הבא:

$('li').eq(1);

כך אני בוחר את האלמנט השני (אנחנו זוכרים שב-JavaScript מערך של אלמנטים מתחיל מ-0). ראשית הסלקטור שהוא בעצם מערך של אלמנטים ואז הפונקציה שבוחרת מתוך המערך את האלמנט המבוקש. הסלקטור יכול להיות כל סלקטור תקני של jQuery. ועכשיו לדוגמא מהחיים האמיתיים, לחצו על הכפתור על מנת לצבוע את הפריט השני ברשימה באדום.

Do the Action

• פריט ראשון
• פריט שני
• פריט שלישי

וכך הקוד נראה, שימו לב לסדר ההיררכי. ראשית אני משיג את רשימת האלמנטים באמצעות סלקטור של css שבוחר את כל הפריטים ברשימה מתחת לכל אלמנט עם id של example1 ורק אחרי כן מפעיל את פונקצית הבחירה eq עם פרמטר 1 – בחירה באלמנט השני מתוך סדר האלמנטים.

$('#myButton1').click(function () {
$('#example1 li').eq(1).css('color', 'red');
});

בחירת קבוצת אלמנטים ממערך של אלמנטים

נניח ובחרתי עם סלקטור של jQuery מספר אלמנטים אך אני מעוניין שרק אלו מ-class מסוים ייבחרו? בשביל זה יש את פונקצית filter שבאמצעותה אני מפלטר החוצה אלמנטים שאני לא מעוניין בהם ומכניס רק את אלו שאני מעוניין. הפונקציה הזו זהה בשימושה לפונקציה הקודמת. ראשית אני בוחר באמצעות סלקטור של jQuery רשימת אלמנטים. אחרי כן אני כותב את פונקצית filter שמקבלת גם היא סלקטור תקני של jQuery אך הפעם כל מה שאני מעביר לתוכה יפולטר פנימה וכל מה שלא מתאים יישאר בחוץ.

בדוגמא שלנו יש רשימה ששניים מהפריטים שלה הם בעלי class="test", על מנת לפלטר אותם פנימה אני צריך לבחור את כל הפריטים מהרשימה שלי באמצעות סלקטור, לכתוב את פונקצית פילטר ואז להעביר לתוכה כפרמטר סלקטור תקני של .test

Do the Action

• פריט ראשון
• פריט שני
• פריט שלישי

וככה זה עובד, שימו לב – ראשית בחירה של רשימת אלמנטים עם סלקטור של jQuery ואז שימוש ב-filter על מנת לקבל מתוך הרשימה הזו רק את אלו שאנו רוצים, אלו שיש להם class ששמו הוא test.

במקום להעביר string של סלקטור, אני יכול להעביר גם פונקציה שמחזירה לי תוצאה. כך למשל, אם אני רוצה לבחור את אלו שיש להם rel של test, אני יכול להעביר פונקציה שמחזירה מערך של אלמנטים שה-attribute שלהם הוא rel=test. איך עושים את זה? פשוט מאד:

Do the Action

• פריט ראשון
• פריט שני
• פריט שלישי

איך עשיתי את זה? בתוך פונקצית filter הכנסתי עוד פונקציה שמחזירה לי true or false. הפונקציה הזו פשוט שואלת, באמצעות atter אם לאלמנט יש rel=true. אני משתמש כאן בסלקטור שנקרא this. הסלקטור הזה אמור להיות מוכר לכל מתכנת, גם מי שמכיר רק JavaScript. ב-jQuery אנחנו מתייחסים אליו כסלקטור לכל דבר.

$('#myButton3').click(function () {
$('#example3 li').filter(
function(){
return $(this).attr("rel") == "test";
}
).css('color', 'red');;
});

בחינה של מערך של אלמנטים

נניח ובחרתי באמצעות סלקטור של jQuery את כל הפריטים ברשימה ואני רוצה לדעת אם אחד מהם נושא את תכונת ה-rel, דרך טובה לעשות זאת היא עם פונקצית is שבתוכנה אני רושם פרמטר או פרמטרים כלשהם והיא מחזירה לי true או false. כמו למשל בדוגמא הזו:

• פריט ראשון
• פריט שני
• פריט שלישי

האם יש ברשימה הזו מישהו עם class שמו הוא test

ואת זה עשיתי עם הקוד הבא. זה דומה מאד לפילטר רק שבמקרה הזה לא עושים שום פעולה אלא מקבלים רק true או false.

$('#myButton4').click(function () {
var isClass = $('#example2 li').is('.test');
alert(isClass);
});

הוצאת קבוצה של אלמנטים ממערך

בדיוק כמו filter, אבל הפוך. נניח שבחרתי קבוצה של אלמנטים עם סלקטור של jQuery ואני רוצה להוציא חלק מהם. מה שאעשה זה להשתמש בפונקצית not ולהעביר בתוכה את הסלקטורים של אלו שאני רוצה להוציא החוצה. למשל:

• פריט ראשון
• פריט שני
• פריט שלישי

Do the Action

כפי שאפשר לראות בקוד, עשיתי copy&patse מהדוגמא למעלה ופשוט החלפתי את פונקצית ה-filter בפונקצית not וזה עשה בדיוק את ההיפך, פילטר החוצה את כל האלמנטים שיש להם class של test

$('#myButton5').click(function () {
$('#example5 li').not('.test').css('color', 'red');
});

בחירת טווח אלמנטים

אם אני רוצה מהרשימה התיאורטית שלי רק את פריטים 2 עד 7, כיצד אני יכול לעשות את זה? הדרך הפשוטה ביותר היא לבחור את כל פריטי הרשימה ואז להשתמש בפונקצית slice. הפונקציה הזו מקבל 2 פרמטרים, הראשון הוא מאיפה להתחיל את החיתוך (בדוגמא התיאורטית שלנו מ-2) והשני הוא איפה לסיים את החיתוך (בדוגמא התיאורטית שלנו 7). אם אנו לא מספקים את הפרמטר השני הפונקציה תסיים את החיתוך בסוף המערך.

נשמע מבלבל? דוגמא קטנה תמיד עוזרת. יש לי רשימה עם 10 פרטים ואני רוצה לצבוע את פריט 4-7. לחצו נא על הכפתור:

• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

Do the Action

ככה זה נראה, כדאי לשים לב שהפרמטר של היכן מסתיים החיתוך הוא גבוה ב-1 מזה שאנו רוצים להשאיר, כלומר החיתוך הוא לא כולל מיקום 7 (שהוא בעצם 8 כי אנחנו מתחילים מ-0).

$('#myButton6').click(function () {
$('#example6 li').slice(3,7).css('color', 'red');
});

הוספת מערך של אלמנטים למערך אחר של אלמנטים

נניח שבחרתי כמה פריטים מהרשימה, הכל טוב ויפה, אבל נניח שאני רוצה לצרף אליהם איזו פסקה, או אפילו פריטים מרשימה אחרת. ורק אז להריץ על הכל פונקציה מסוימת (כמו בדוגמא שלנו, לשנות את הצבע לאדום). בדיוק בשביל יש ב-jQuery פונקציה בשם add שעושה את זה. הסינטקס גם הוא פשוט וכיפי כל מה שהפונקציה הזו מקבלת זה סלקטור של jQuery. שימו לב לדוגמא הבאה, יש לנו רשימה ו-2 פסקאות, אני רוצה להפוך את כולם לאדומים.

• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

פסקת דוגמא

פסקת דוגמא נוספת

Do the Action

וככה זה נראה:

$('#myButton7').click(function () {
$('#example7 li').add('.example_class').css('color', 'red');
});

בחירת אלמנטים ילדים

פונקציה שימושית נוספת היא בחירת כל הילדים המיידיים, אלו ברמת ההיררכיה הראשונה. למה זה שימושי? נניח שיש לי רשימה שבה יש טקסטים עם קישורים וטקסטים עם הדגשות ואני רוצה להפוך גם את הקישורים וגם את ההדגשות לאדומים, הדרך הפשוטה ביותר לעשות את זה היא באמצעות פונקצית children שבוחרת את כל הילדים המידיים של האלמנטים שאני בוחר. והסינטקס? ב-jQuery זה תמיד פשוט.

• פריט ראשון עם קישור
• פריט שני
• פריט שלישי עם קישור
• פריט רביעי
• פריט חמישי
• פריט שישי עם הדגשה
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

Do the Action

וככה זה נראה. אני יכול גם להעביר פרמטר דרך children על מנת לפלטר אלמנטים שאני רוצה, אם אני מעביר a אז רק הקישורים היו מוארים באדום. שימו לב שמדובר בילדים מיידיים ולא בצאצאים שקבורים עמוק בהיררכיה.

$('#myButton8').click(function () {
$('#example8 li').children().css('color', 'red');
});

מצא אלמנט אב קרוב

closest היא פונקציה שימושית להפליא. נניח ובחרתי אלמנט מסוים ואני רוצה לבחור באמצעותו אלמנט אב מסוג כלשהו. הפונקציה תטפס מעלה בהיררכית הדף עד שהיא תתקל באלמנט שאותו אני רוצה ואז תבחר אותו. בדוגמא למשל יש לי רשימה (בלי id) שבה יש פריטים, באחד הפריטים יש קישור שלו יש id ואותו אני בוחר, באמצעות פונקצית closest שלתוכה אני מעביר פרמטר של סלקטור ul, אני אצליח ליצור גבול אדום מסביב לכל הרשימה.

• פריט ראשון
• פריט שני
• פריט שלישי עם קישור
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

Do the Action

והנה הקוד: פשוט למדי. שימו לב שהשתמשתי אך ורק ב-id של הקישור הפנימי. מדובר בפונקציה מאד שימושית. במיוחד בממשקי drag&drop שבהם אתה לא ממש יודע איפה האלמנט נמצא ובמקום להשתמש בflags או switch אתה משתמש בזה.

$('#myButton9').click(function () {
$('#link_example').closest('ul').css('border', '3px Solid red');
});

אני יכול להעביר כמה אלמנטים ולא רק אלמנט אחד בפונקצית closest והפונקציה תבחר את האלמנט הכי קרוב. למשל

$('#link_example').closest('ul, div').css('border', '3px Solid red');

הפונקציה הזו תתנהג כמו closest עם אלמנט אחד, רק שהיא תעלה במעלה ה-DOM וברגע שהיא נתקלת או ב-ul או ב-div היא תבחר אחד מהם.

מצא את כל האלמנטים הילדים

באמצעות פונקצית contents אנו יכולים לאתר את כל הילדים והצאצאים של האלמנט כולל text nodes, כלומר לבנות מערך של כל האלמנטים שיש מתחת לאלמנט מסוים – כולל הטקסטים. מדובר בפונקציה שימושית מאד לאלו שבונים ממשקים. בדוגמא שאתן, אני אריץ את הפונקציה הזו על אלמנט ה-ul שלי ואבקש ממנו להדגיש את כל הילדים.

• פריט ראשון
• פריט שני
• פריט שלישי עם קישור
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

Do the Action

פונקצית contents דומה למדי לפונקצית children למעט העובדה החשובה שהיא בוחרת גם את ה text nodes. על מנת להמחיש את ההבדלים בדקו עם firebug את הרשימה שלעיל אחרי שלחצתם על הכפתור שהפעיל את פונקצית children.

$('#myButton10').click(function () {
$('#example10').contents().wrap('');
});

מציאת אלמנט ילד

פונקצית find היא בדיוק כמו פונקצית closest רק הפוך: היא מחפשת במורד ההיררכיה על מנת למצוא אלמנט מסוג מסוים. בואו ונניח שיש לי רשימה, וברשימה יש פריטים ובאחד הפריטים יש קישור שבתוכו יש span. ואני לצורך העניין רוצה למצוא את ה-span הזה ולצבוע אותו באדום. פונקצית find היא אידיאלית לעניין זה. כל מה שעלי לעשות זה לבחור עם סלקטור את הרשימה, להשתמש בפונקצית span שמקבל גם היא את כל סוגי הסלקטורים. אני אבחר בסלקטור span והאלמנט הסורר יימצא. הדוגמא תבהיר את הכל:

• פריט ראשון
• פריט שני
• פריט שלישי עם קישור נחמד וחביב
• פריט רביעי
• פריט חמישי
• פריט שישי
• פריט שביעי
• פריט שמיני
• פריט תשיעי
• פריט עשירי

Do the Action

והנה הקוד:

$('#myButton11').click(function () {
$('#example11').find('span').css('color', 'red');
});

במאמר הבא אנו ממשיכים ללמוד פונקציות jQuery נוספות שמאפשרות לנו בחירת אלמנטים מדויקת.