תיאור: מחזיר כל האחים הבאים של כל אלמנט לסט אלמנטים בהתאמה, מסוננים אופציאונלית על ידי הסלקטור.
אובייקט jQuery הנתון מציג סט אלמנטים של
DOM,
שיטה .nextAll()
מאפשרת לנו לחפש בין הממשיכים של אלמנטים האלה בעץ
DOM
וליצור אובייקט חדש של
jQuery
מאלמנטים בהתאמה.
שיטה מקבלת אופציאונלית ביטוי בחירה מאותו סוג, שאנחנו יכולים להעביר לתוך הפונקציה
$().
אם סלקטור מסופק, אלמנטים יסוננו על ידי בדיקה להתאמה אליו.
נתבונן על דף עם רשימה פשוטה:
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
אם נתחיל מפריט שלישי, נמצא אלמנטים, שבאים אחריו:
$('li.third-item').nextAll().css('background-color', 'red');
תוצאה של קריאה הזו היא רקע אדום עבור פריטים 4 ו- 5. מכיוון שאנחנו לא מספקים ביטוי בחירה, אלמנטים האלה באופן חד משמעי יוכללו כי חלק של אובייקט. אם אנחנו מספקים ביטוי בחירה, אלמנט יבחן להתאמה לפני שהוא נכלל לאובייקט חדש של jQuery.
דוגמאות
דוגמה 1
מאתר כל האלמנטים מסוג div אחרי ראשון ונותן להם class.דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div:first").nextAll().addClass("after"); }); </script> <style> div { width: 80px; height: 80px; background: #abc; border: 2px solid black; margin: 10px; float: left; } div.after { border-color: red; } </style> </head> <body> <div>first</div> <div>sibling<div>child</div></div> <div>sibling</div> <div>sibling</div> </body> </html>
דוגמה 2
מתאר כל הפסקאות אחרי ילד השני בתוך ה- body ונותן להם class.דוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $(":nth-child(1)").nextAll("p").addClass("after"); }); </script> <style> div, p { width: 60px; height: 60px; background: #abc; border: 2px solid black; margin: 10px; float: left; } .after { border-color: red; } </style> </head> <body> <p>p</p> <div>div</div> <p>p</p> <p>p</p> <div>div</div> <p>p</p> <div>div</div> </body> </html>
האם מידע זה היה מועיל?
