closest()

תוכן:

closest( selector )
- .closest( selector )
- .closest( selector, [ context ] )
closest( selectors, [ context ] )
- .closest( selectors, [ context ] )

.closest( selector )

מחזירה: jQuery

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

.closest( selector )

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

selector

מחרוזת

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

.closest( selector, [ context ] )

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

selector

מחרוזת

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

context

אלמנט

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

.closest( jQuery object )

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

jQuery object

אובייקט

אובייקט jQuery המתאים לאלמנטים.

.closest( element )

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

element

אלמנט

אלמנט התואם לאלמנטים.

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

.closest()	.parents()
מתחיל מאלמנט הנוחכי	מתחיל מאלמנט הורה
עובר מעלה בעץ DOM עד למציאת התאמה עבור סלקטור שסופק	עובר מעלה בעץ DOM עד לאלמנט שורש של מסמך, מוסיף כל אב של האלמנט לאוסף זמני; אחרי זה מסנן אוסף עם סלקטור (במידה וסופק)
אובייקט jQuery שמוחזר מכיל אפס או אלמנט אחד	אובייקט jQuery שמוחזר מכיל אפס, אחד או מספר אלמנטים

<ul id="one" class="level-1">
    <li class="item-i">I</li>
    <li id="ii" 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>

נניח שאנחנו מבצעים חיפוש אלמנטים <ul>, החל מפריט A:

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

זה יגרום לשינוי צבע של level-2 <ul>, מכיוון שהוא הראשון שנמצא על ידי השיטה בזמן העלה בעץ DOM.

נניח אנחנו מחפשים במקום זה אלמנט <li>:

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

זה יגרום לשינוי צבע של פריט A. שיטה .closest() מתחילה חיפוש מאלמנט עצמו עד העברה מעלה בעץ DOM, ועוצרת כאשר פריט A תואם לסלקטור.

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

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
  .css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
  .css('background-color', 'green');

זה ישנה צבע של level-2 <ul>, מכיוון שהוא גם הורה ראשון <ul> רשימה פריט A וגם צאצא של רשימה פריט II. זה לא ישנה צבע level-1 <ul>, מכיוון שהו לא צאצא של רשימה פריט II.

דוגמה

ממחיש כיצד ניתן לעשות משלחת של האירועים באמצעות פונקציה closest

    $(document).bind("click", function (e) {
      $(e.target).closest("li").toggleClass("hilight");
    });

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

נסה זאת בעצמך

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

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

  $(document).ready(function(){
    
    $(document).bind("click", function (e) {
      $(e.target).closest("li").toggleClass("hilight");
    });

  });
  </script>

  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>

</head>
<body>
  <ul>
<li><b>Click me!</b></li>

<li>You can also <b>Click me!</b></li>

</ul>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מציג כיצד אירוע משלחת ניתן לעשות עם closest. אלמנט הקרוב ברשימה מחליף רקע לצהוב כאשר הוא או צאצא שלו נלחץ

<!DOCTYPE html>
<html>
<head>
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
  </ul>
<script>
  var $listElements = $("li").css("color", "blue");
  $( document ).bind("click", function( e ) {
    $( e.target ).closest( $listElements ).toggleClass("hilight");
  });
</script>

</body>
</html>

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

נסה זאת בעצמך

.closest( selectors, [ context ] )

מחזירה: מערך

תיאור: מחזיר מערך של כל האלמנטים וסלקטורים, המותאם נגד האלמנט הנוכחי דרך עץ DOM.

.closest( selector, [ context ] )

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

selector

מחרוזת

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

context

אלמנט

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

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

דוגמה

מציג, כיצד אירוע של המשלחת ניתן לעשות עם closest.

var close = $("li:first").closest(["ul", "body"]);
  $.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
   var close = $("li:first").closest(["ul", "body"]);
  $.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});
  });
  </script>
</head>
<body>
	<ul><li></li><li></li></ul>
</body>

</html>

נסה זאת בעצמך

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

כן לא

closest()

.closest( selector )

.closest( selector )

.closest( selector, [ context ] )

.closest( jQuery object )

.closest( element )

דוגמה

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

דוגמה 2

.closest( selectors, [ context ] )

.closest( selector, [ context ] )

דוגמה

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

תגובות