תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

איתור אלמנטים באמצעות jQuery

מחבר:
בתאריך:

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

 

המתודות ()next ו-()prev

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

לחצו עליי - פסקה ראשונה

לחצו עליי - דיב ראשון

לחצו עליי - פסקה שנייה

לחצו עליי - דיב שני

הקוד שמייצר את ההתנהגות הזו הוא הקוד הבא. לחיצה על הסלקטורים p ו-div, גורמים לשינוי באלמנט הבא באמצעות ()next.

$(document).ready(function() {
    $(" p , div").on("click" , function(){
        $(this).next().css({"color":"red"});
    });
});

למתחילים, אני ממליץ על קריאת המדריך "אירועים ב-jQuery" .

כדי לבחור אלמנטים מסוימים בלבד,  נוסיף פרמטר ל-next. בדוגמה הבאה, אנחנו מסננים רק אלמנטים מסוג div באמצעות העברת פרמטר .next('div')

    $(this).next('div').css({"color": "red" } );

המתודה ()prev מאוד דומה ל-next, ומאפשרת לבחור את האלמנטים הקודמים.

 

המתודות ()nextAll ו-()prevAll

בעוד המתודות ()prev ו- ()next מאפשרות לבחור אלמנט אחד בלבד, המתודות ()nextAll ו-()prevAll מאפשרות לבחור אלמנטים מרובים.

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

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

הקוד שאחראי להתנהגות זו משתמש ב- ()nextAll:

$(document).ready(function() {
    $(" ul li").on("click" , function(){
        $(this).nextAll().css({"color":"red" , "background-color":"yellow"});
    });
});

גם במקרה של ()nextAll ו-()prevAll, ניתן להעביר פרמטר נוסף כדי להגביל את הבחירה. דוגמת הקוד הבאה, תבחר כל אלמנט שהוא פסקה (p) מהאלמנטים שאחרי הסלקטור:

   $(this).nextAll('p').css({"color": "red"} );

 

המתודה ()siblings

()siblings זו מתודה שמאתרת אלמנטים אחים. מה זה אלמנטים אחים? אלמנטים מאותה רמה. לדוגמה, בהטמ"ל הבא, הדיבים והפסקאות הם אחים, מפני שהם נמצאים באותה רמה.

<html>
<body>
    <div>דיב ראשון</div>
    <p>פסקה<span>ספאן</span></p>
    <div>דיב אחרון</div>
</body>
</html>

לעומת זאת תגית ה-body שעוטפת את ההטמ"ל היא הורה, ותגית ההטמ"ל היא הורה מסדר שני. לפי אותו הגיון, הספאן שנמצא בתוך הפסקה , ומסומן בירוק, מהווה אלמנט ילד.

כשאנחנו משתמשים ב- ()siblings אנחנו מאתרים את האלמנטים האחים, ויכולים לשנות אותם כרצוננו. ברשימה הבאה, לחיצה על כל פריט ברשימה, תגרום לשינוי במראה של כל פרטי הרשימה הנותרים. לחצו על פריטים ברשימה הבאה כדי לראות את ההתנהגות:

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

מה שמפעיל את ההתנהגות הזו הוא הקוד הבא:

$('li').on('click',function(){
    $(this).siblings().css({"color": "red", "background-color":"yellow"} );
});

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

$('li').on('click',function(){
    $(this).siblings('li').css({"color": "red", "font-size":"26px"} );
});

 

המתודות ()find ו-()children

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

לחצו עליי!!!! אני הסבא

ילד

נכד שבו נראה את השינוי

הקוד הבא הוא זה שאחראי להתנהגות שאנחנו רואים למעלה:

<div class="parent">לחצו עליי!!!! אני הסבא
    <div id="child ">ילד
        <div id="grandson">נכד שבו נראה את השינוי</div>
    </div>
</div>
 
$('.parent').on('click',function(){
    $(this).find('#grandson').css({"color": "red" , "background-color":"yellow"} );
});

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

לחצו עליי!!!! אני הסבא

בגלל שהשתמשנו ב-children גם הילד וגם הסבא יראו את השינוי

נכד שלא ישתנה

במצב כזה ישתנה גם ההורה וגם הצאצא הישיר שלו. חשוב מאוד לשים לב ולתת הגדרות ברירת מחדל לילדים, בגלל שהנכד יירש את הגדרות ה-CSS מההורים שלו. כך נראה הקוד המלא כולל הגדרות ה-CSS:

<style> div {color: black; background-color: white;} </style>
<div class="parent">לחצו עליי!!!! אני הסבא
    <div id="child ">גם הילד וגם הסבא יראו את השינוי
        <div id="grandson">נכד שבו לא נראה את השינוי</div>
    </div>
</div>
 
$('.parent').on('click',function(){
    $(this).children().css({"color": "white" , "background-color":"red"} );
});

המתודות ()parents ו-()parent

המתודה ()parents יודעת לאתר אלמנטים שנמצאים במקום גבוה יותר בהיררכיה. האלמנטים יכולים להיות הורים, סבים ואף אלמנטים מסדר גבוה יותר. בהתאם, לחיצה על כפתור "נכד - לחצו עליי!!!!" תגרום לשינוי ברשימות עד להורה שהגדרנו. לחצו על הנכד לראות את ההתנהגות הזו:

  • •  פריט ראשון ברשימה חיצונית
  • •  פריט שני ברשימה חיצונית
    • •  פריט ראשון ברשימה פנימית
    • •  פריט שני ברשימה פנימית
    • • הורה שהוא פריט שלישי ברשימה פנימית
      •         • נכד - לחצו עליי!!!!
      •         • נכד נוסף

זה הקוד שמייצר את ההתנהגות הזו. ניתן לראות ש-()parents מוגבל עד לאלמנט ul#grandparent.

<ul>
<li>פריט ראשון ברשימה חיצונית </li>
<li> פריט שני ברשימה חיצונית </li>
    <ul id="grandparent">
    <li>פריט ראשון ברשימה פנימית</li>
    <li>פריט שני ברשימה פנימית</li>
    <li>
        <ul id="parent">
            <li id="demo-parents">!!!!נכד - לחצו עליי</li>
            <li>נכד נוסף</li>
        </ul>
    </li>
    </ul>
</ul>
 
$('#demo-parents').click(function(){
    $(this).parents("ul#grandparent").css({"background-color":"yellow"} );
});

 

המתודה ()parent , דומה ל-()parents, אולם מאתרת עד ההורה המיידי בלבד (כולל האלמנט עצמו). כך נראה קוד שמשלב בתוכו את המתודה parent:

$('#demo-parents').click(function(){
    $(this).parent().css({"background-color":"yellow"} );
});

וזו הדגמה של הקוד:

  • •  פריט ראשון ברשימה חיצונית
  • •  פריט שני ברשימה חיצונית
    • •  פריט ראשון ברשימה פנימית
    • •  פריט שני ברשימה פנימית
    • • הורה שהוא פריט שלישי ברשימה פנימית
      • • נכד - לחצו עליי!!!!
      • • נכד נוסף

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

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

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים