jQuery – מעבר בין אלמנטים חלק ב

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

בחר את האלמנט האח הבא

נניח ובחרתי באמצעות סלקטור פריט ברשימה, אך אני לא מעוניין בו אלא בפריט שאחריו – בשביל זה יש את פונקצית next שמסייעת לי לבחור אלמנט אח. בדוגמא הבאה למשל אני משתמש בסלקטור id על מנת לבחור את הפריט הראשון ברשימה ואז משתמש בפונקצית next על מנת לבחור את האלמנט שעליו אבצע את הפעולה שלי – צביעה בצבע אדום.

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3

Do the Action

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

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

בחר את אלמנט האח הקודם

פונקצית prev דומה לחלוטין ל-next רק שהיא בוחרת את זו הקודמת. אני לא מצרף דוגמא כי היא מתנהגת בדיוק אותו הדבר.

בחירת כל האלמנטים האחים הבאים

בעוד ש-select בוחרת רק אלמנט אח אחד, פונקצית nextAll בוחרת את כל האלמנטים האחים. כאן למשל לקחתי את אותה רשימה ובחרתי עם הסלקטור את הפריט הראשון, הפעם אני אריץ על האלמנט שבחרתי את nextAll על מנת למצוא את כל האלמנטים האחים. לחיצה על הכפתור תאיר את כל האלמנטים האחים של הפריט הראשון ברשימה.

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3

Do the Action

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

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

בחר את כל האלמנטים האחים הקודמים

אתם יכולים לנחש שבדיוק כמו שתאומתה של פונקצית next היא prev, כך גם תאומתה של פונקצית nextAll היא prevAll וגם היא דומה לחלוטין ל-nextAll רק שהיא בוחרת את כל האלמנטים האחים הקודמים ולא הבאים.

מצא את כל האלמנטים האחים הבאים בתור עד אח מסוים

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

$('#myButton12').click(function () {
$('#example12').nextUntil(':contains(פריט מספר 4)').css('color', 'red');
});

פונקצית nextUntil מחזירה לנו את כל האחים עד אח מסוים (במקרה הזה, אח שיש בו את הטקסט 'פריט מספר 4') אפשר להעביר כל סלקטור בתוך הפונקציה הזו. והנה הדוגמא המיוחלת:

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3
• פריט מספר 4
• פריט מספר 5
• פריט מספר 6

Do the Action

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

מצא את כל האלמנטים האחים הקודמים בתור עד אח מסוים

פונקצית prevUntil דומה מאד לקודמתה nextUntil מלבד העובדה שהיא בוחרת את כל האחים שקדמו לאלמנט שלי. דוגמא טובה תמיד מבהירה הכל טוב יותר. נניח ואני בוחר עם הסלקטור שלי פריט מספר 7 ברשימה ואני רוצה להאיר חלק ממנה עד פריט מספר 4 – כל מה שעלי לעשות זה להריץ את הפונקציה הבאה:

$('#myButton13').click(function () {
$('#example13').prevUntil(':contains(פריט מספר 4)').css('color', 'red');
});

הפונקציה הזו נעה לאחור מהסלקטור שלי (במקרה הזה id של פריט מספר 7) עד שהיא מגיעה לפריט שכולל את הטקסט 'פריט מספר 4' ושם היא עוצרת. פונקצית ה-css צובעת את כל הבחירה שלי באדום. הנה הדוגמא החיה:

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3
• פריט מספר 4
• פריט מספר 5
• פריט מספר 6
• פריט מספר 7
• פריט מספר 8
• פריט מספר 9
• פריט מספר 10
• פריט מספר 11

Do the Action

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

אם לא ממש משנה לכם אחים קודמים או אחים הבאים אלא אתם רוצים את כל האחים, פונקצית siblings באה לעזרתכם. אם בדוגמא שלי יש פריט כלשהו שאותו אני בוחר עם סלקטור, הצמדה של פונקצית sibling תבחר את כל האלמנטים האחים שלו ותאפשר לי לצבוע אותם באדום. שימו לב לדוגמא:

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3
• פריט מספר 4
• פריט מספר 5
• פריט מספר 6

Do the Action

האלמנט שאותו בחרתי עם הסלקטור הוא פריט מספר 4:

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

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

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

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3

Do the Action

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

$('#myButton3').click(function () {
$('#example3').parent().css('border', 'Red 1px Solid');
});

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

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

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3

Do the Action

$('#myButton4').click(function () {
$('#example4').parents('ul').css('border', 'Red 1px Solid');
});

בחירת כל האלמנטים האבות עד אב מסוים

פונקצית parentsUntil דומה לפונקצית parents, אך כאן אני לא מקבל מערך של כל ההורים אלא מערך של כל ההורים עד אלמנט מסוים. אם למשל יש לי פריט שנמצא בתוך רשימות ואני רוצה לבחור את כל ההורים עד הרשימה שיש לה id מסוים, כמו למשל בדוגמא הבאה:

• רשימה ראשונה: פריט מספר 1
• רשימה ראשונה: פריט מספר 2
• רשימה ראשונה: פריט מספר 3
• • רשימה שניה: פריט מספר 1
  • רשימה שניה: פריט מספר 2
  • רשימה שניה: פריט מספר 3
  • • רשימה שלישית: פריט מספר 1
    • רשימה שלישית: פריט מספר 2
    • רשימה שלישית: פריט מספר 3

Do the Action

$('#myButton14').click(function () {
$('#example14').parentsUntil('#my-parent').css('border', 'Red 1px Solid');
});

הסלקטור בחר את כל ההורים עד ההורה שיש לו id של my-parent (במקרה הזה li שהצמדתי לו את ה-id).

הוספה של הסלקטור המקורי למערך

בכל הפונקציות של traversing, אם זה בחירת אחים או בחירת הורים, מערך האלמנטים (או האלמנט) המתקבלים הם ללא הסלקטור המקורי. כך למשל, אם אני רוצה לבחור את כל האחים של פריט בעל id מסוים ולצבוע אותם באדום, אני משתמש בפונקצית siblings, אך הפונקציה משמיטה את האלמנט המקורי. שימו לדוגמת 'בחר את כל האלמנטים לאחים' שלעיל. ואם אני רוצה לבחור גם את האלמנט שהוזכר בסלקטור? בשביל זה יש את פקודת andSelf. שימו לב לדוגמא והשוו לדוגמא שנתתי ב'מצא את כל האלמנטים האחים'.

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3
• פריט מספר 4
• פריט מספר 5
• פריט מספר 6

Do the Action

ועכשיו לפונקציה, כדאי מאד להשוות לשם ההבנה לדוגמת sibling בדף זה.

$('#myButton6').click(function () {
$('#example6').siblings().andSelf().css('color', 'red');
});

חזור אלי

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

$('#myButton7').click(function () {
$('#example7').siblings().css('color', 'red');
$('#example7').css('color','green');
});

זו כמובן דרך קבילה אבל יש דרך יותר יפה. הרי הסלקטור כבר קיים. כל מה שאנו צריכים לעשות זה להוריד את הבחירה שלנו באלמנטים האחים אחרי שצבענו אותם באדום. לשם כך אנחנו משתמשים בפונקצית end. במקרה הזה דוגמא ממחישה את העניין בצורה הטובה ביותר.

• פריט מספר 1
• פריט מספר 2
• פריט מספר 3
• פריט מספר 4
• פריט מספר 5
• פריט מספר 6

Do the Action

והקוד נראה כך:

$('#myButton7').click(function () {
$('#example7').siblings().css('color', 'red').end().css('color','green');
});

במאמר הבא אנחנו בוחנים כלים שימושיים ש-jQuery נותנת לנו לעשיית מגוון של פעולות.