parent()

.parent( [ selector ])

מחזירה: jQuery

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

.parent( [ selector ] )

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

selector

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

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

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

דוגמאות

דוגמה 1

מציג הורה של כל אלמנט בצורה ( הורה > ילד ).

    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>

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

  $(document).ready(function(){
    
    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });

  });
  </script>

  <style>

  div,p { margin:10px; }
  </style>
</head>
<body>
  <div>div, 
    <span>span, </span>

    <b>b </b>

  </div>
  <p>p, 
    <span>span, 
      <em>em </em>

    </span>
  </p>

  <div>div, 
    <strong>strong, 
      <span>span, </span>
      <em>em, 
        <b>b, </b>

      </em>

    </strong>
    <b>b </b>
  </div>
</body>

</html>

נסה זאת בעצמך

דוגמה 2

מחפש אלמנט הורה של כל הפסקאות עם class 'selected' .

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

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

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

</body>
</html>

נסה זאת בעצמך

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

כן לא

parent()

.parent( [ selector ])

.parent( [ selector ] )

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות