next()

.next( [ selector ])

מחזירה: jQuery

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

.next( [ selector ] )

הוספה בגרסה: 1.0

selector

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

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

שיטה מקבלת אופציאונלית ביטוי בחירה מאותו סוג, שאנחנו יכולים להעביר לתוך הפונקציה $(). אם האחים שבאים מייד מתאימים לסלקטור, הם נשארים באובייקט חדש שנוצר של 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').next().css('background-color', 'red');

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

דוגמאות

דוגמה 1

מחפש אלמנט הקרוב עבור כל כפתור לא זמין ( אלמנט הבא אחרי כפתור ) ומשנה טקסט שלו ל- «this button is disabled» .

$("button[disabled]").next().text("this button is disabled");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
$("button[disabled]").next().text("this button is disabled");
  });
  </script>

  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>

<body>
  <div><button disabled="disabled">First</button> - <span></span></div>

  <div><button>Second</button> - <span></span></div>

  <div><button disabled="disabled">Third</button> - <span></span></div>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

מחפש אלמנט שבא אחרי כל פסקה שיש לו class «selected» .

$("p").next(".selected").css("background", "yellow");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("p").next(".selected").css("background", "yellow");
  });
  </script>

  
</head>
<body>
  <p>Hello</p>

  <p class="selected">Hello Again</p>
  <div><span>And Again</span></div>

</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

next()

.next( [ selector ])

.next( [ selector ] )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות