parents()

.parents( [ selector ])

מחזירה: jQuery

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

.parents( [ selector ] )

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

selector

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

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

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

נתבונן על דף עם רשימה מקוננת:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

אם אנחנו נתחיל מפריט A, נוכל למצוא אבות קדמונים שלו:

$('li.item-a').parents().css('background-color', 'red');

תוצאה של קריאה זו היא רקע אדום עבור רשימה level-2, פריט II, ורשימה level-1 (ולמעלה בעץ DOM עד הסוף - עד לאלמנט <html>). מכיוון שאנחנו לא מספקים ביטוי בחירה, כל האבות קדמונים יהיו חלק מאובייקט המוחזר של jQuery. אם היינו מספקים ביטוי בחירה, רק פריטים מתאימים ביניהם היו נכללים.

דוגמאות

דוגמה 1

מחפש כל אלמנטים הורה של תג b.

    var parentEls = $("b").parents()
                          .map(function () { 
                                return this.tagName; 
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

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

נסה זאת בעצמך

דוגמה 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 parentEls = $("b").parents()
                          .map(function () { 
                                return this.tagName; 
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

  });
  </script>

  <style>

  b { color:blue; }
  strong { color:red; }
  </style>
</head>
<body>
  <div>
    <p>

      <span>

        <b>My parents are: </b>
      </span>
    </p>
  </div>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

תלחצו כדי למצוא כל אלמנטים הורים div של כל אלמנטים מסוג span.

    function showParents() {
      $("div").css("border-color", "white");
      var len = $("span.selected")
                       .parents("div")
                       .css("border", "2px red solid")
                       .length;
      $("b").text("Unique div parents: " + len);
    }
    $("span").click(function () {
      $(this).toggleClass("selected");
      showParents();
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>

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

  $(document).ready(function(){
    
    function showParents() {
      $("div").css("border-color", "white");
      var len = $("span.selected")
                       .parents("div")
                       .css("border", "2px red solid")
                       .length;
      $("b").text("Unique div parents: " + len);
    }
    $("span").click(function () {
      $(this).toggleClass("selected");
      showParents();
    });
  });
  </script>

  <style>
  p, div, span {margin:2px; padding:1px; }
  div { border:2px white solid; }
  span { cursor:pointer; font-size:12px; }
  .selected { color:blue; }
  b { color:red; display:block; font-size:14px; }
  </style>
</head>
<body>
  <p>
    <div>

      <div><span>Hello</span></div>
      <span>Hello Again</span>
    </div>
    <div>

      <span>And Hello Again</span>
    </div>
  </p>
  <b>Click Hellos to toggle their parents.</b>

</body>

</html>

נסה זאת בעצמך

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

כן לא

parents()

.parents( [ selector ])

.parents( [ selector ] )

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות