logo

שיטת jQuery parent()

ה הוֹרֶה() השיטה ב-jQuery מוצאת את האב הישיר של הבורר הנתון. זוהי פונקציה מובנית ב-jQuery. שיטה זו חוצה רק רמה אחת למעלה בעץ ה-DOM ומחזירה את האב הישיר של האלמנט הנבחר.

ה הוֹרֶה() השיטה דומה ל- הורים() שיטה, שכן שניהם נוסעים לעץ ה-DOM ומחזירים את אלמנט האב. אבל ההבדל הוא שה הורים() השיטה חוצה רמות מרובות למעלה בעץ ה-DOM ומחזירה את כל האבות הקדמונים, כולל סבא וסבתא, סבא רבא וכו' של הבורר הנתון, בעוד ש- הוֹרֶה() השיטה חוצה רמה אחת למעלה ומחזירה רק את האב הישיר של הבורר הנתון.

תחביר

 $(selector).parent(filter) 

ה בוחר בתחביר לעיל מייצג את האלמנט הנבחר שיש לחפש את האב שלו. ה לְסַנֵן בתחביר הנ'ל נמצא הפרמטר האופציונלי המציין את ביטוי הבורר, המשמש לצמצום החיפוש.

מהו מבנה במבנה הנתונים

דוגמה1

בדוגמה זו, איננו משתמשים בפרמטר האופציונלי של הוֹרֶה() שיטה. כאן, יש אלמנט div המכיל את a ul אלמנט, כותרת h2 , ורכיב פסקה.

אנו מיישמים את הוֹרֶה() שיטה לחיפוש האב של הכותרת h2. אם נשתמש ב הורים() השיטה במקום להשתמש ב- הוֹרֶה() בשיטה, כל האבות הקדמונים של הכותרת h2, כולל אלמנט הגוף, יודגשו.

 .main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $(&apos;h2&apos;).parent().css({ &apos;font-size&apos;: &apos;30px&apos;, &apos;color&apos;: &apos;blue&apos;, &apos;border&apos;: &apos;6px dashed blue&apos;}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me 
בדוק את זה עכשיו

תְפוּקָה:

לאחר ביצוע הקוד לעיל, הפלט יהיה -

סדר sql באקראי
שיטת jQuery parent()

לאחר לחיצה על הכפתור הנתון, הפלט יהיה -

שיטת jQuery parent()

דוגמה2

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

 .main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $(&apos;p&apos;).parent(&apos;:first&apos;).css({&apos;color&apos;: &apos;blue&apos;, &apos;border&apos;: &apos;3px dashed blue&apos;}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me 

לאחר ביצוע הקוד לעיל, הפלט יהיה -

שיטת jQuery parent()

לאחר לחיצה על הכפתור הנתון, הפלט יהיה -

שיטת jQuery parent()

דוגמה3

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

 .main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $(&apos;p&apos;).parent(&apos;h2&apos;).css({&apos;color&apos;: &apos;blue&apos;, &apos;border&apos;: &apos;5px dashed blue&apos;}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me 
בדוק את זה עכשיו

תְפוּקָה:

לאחר ביצוע הקוד לעיל, הפלט יהיה -

מודם לעומת ראוטר
שיטת jQuery parent()

לאחר לחיצה על הכפתור הנתון, הפלט יהיה -

שיטת jQuery parent()