siblings()

.siblings( [ selector ])

מחזירה: jQuery

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

.siblings( [ selector ] )

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

selector

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

אובייקט jQuery הנתון מציג סט אלמנטים של DOM, שיטה .siblings() מאפשרת לנו לחפש בין אחים של אלמנטים האלה בעץ 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').siblings().css('background-color', 'red');

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

האלמנט המקורי אינו נכלל בין אחים, את זה חשוב לזכור כאשר אנו רוצים למצוא את כל האלמנטים ברמה מסוימת של עץ DOM.

דוגמאות

דוגמה 1

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

    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>

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

  $(document).ready(function(){
    
    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);
  });
  </script>

  <style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px; 
      font-weight:bolder; }
  .hilite { background:yellow; }

</style>
</head>
<body>
  <ul>
    <li>One</li>

    <li>Two</li>

    <li class="hilite">Three</li>
    <li>Four</li>
  </ul>

  <ul>
    <li>Five</li>

    <li>Six</li>
    <li>Seven</li>

  </ul>
  <ul>
    <li>Eight</li>

    <li class="hilite">Nine</li>

    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>

  <p>Unique siblings: <b></b></p>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

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

$("p").siblings(".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").siblings(".selected").css("background", "yellow");
  });
  </script>

  
</head>
<body>
  <div><span>Hello</span></div>

  <p class="selected">Hello Again</p>

  <p>And Again</p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

siblings()

.siblings( [ selector ])

.siblings( [ selector ] )

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות