end()

.end()

מחזירה: jQuery

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

.end()

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

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

נניח שיש לנו כמה רשימות קצרות בדף:

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

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

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

זאת שרשרת חיפוש אלמנטים עם מחלקה foo רק ברשימה ראשונה והפיכת צבע רקע לאדום. אחרי זה end() מחזירה אובייקט למצב שלפני הפעלת find(), כך ש- find() השני מחפש '.bar' בתוך <ul class="first">, לא רק בתוך הרשימה <li class="foo">, והופכת רקע של אלמנטים בהתאמה לירוק. התוצאה הסופית היא רקע בצבע של פריטים 1 ו-3 מרשימה הראשונה, ואף אלמנט מרשימה השניה.

שרשרת ארוכה של jQuery ניתן לדמיין כי קוד של בלוק מובנה, עם סינון שיטות מתן הפתחים של בלוקים מקוננים ושיטות end() של סגירה אותם:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

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

דוגמאות

דוגמה 1

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

    jQuery.fn.showTags = function (n) {
      var tags = this.map(function () { 
                              return this.tagName; 
                            })
                        .get().join(", ");
      $("b:eq(" + n + ")").text(tags);
      return this;
    };

    $("p").showTags(0)
          .find("span")
          .showTags(1)
          .css("background", "yellow")
          .end()
          .showTags(2)
          .css("font-style", "italic");

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
  
  <script>

  $(document).ready(function(){
    
    jQuery.fn.showTags = function (n) {
      var tags = this.map(function () { 
                              return this.tagName; 
                            })
                        .get().join(", ");
      $("b:eq(" + n + ")").text(tags);
      return this;
    };

    $("p").showTags(0)
          .find("span")
          .showTags(1)
          .css("background", "yellow")
          .end()
          .showTags(2)
          .css("font-style", "italic");

  });
  </script>

  <style>
  p, div { margin:1px; padding:1px; font-weight:bold; 
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
</head>
<body>
  <p>
    Hi there <span>how</span> are you <span>doing</span>?
  </p>

  <p>
    This <span>span</span> is one of 
    several <span>spans</span> in this
    <span>sentence</span>.
  </p>

  <div>
    Tags in jQuery object initially: <b></b>
  </div>
  <div>
    Tags in jQuery object after find: <b></b>

  </div>
  <div>
    Tags in jQuery object after end: <b></b>
  </div>
</body>
</html>

נסה זאת בעצמך

דוגמאות 2

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

$("p").find("span").end().css("border", "2px red solid");

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
  
  <script>

  $(document).ready(function(){
$("p").find("span").end().css("border", "2px red solid");
  });
  </script>
  <style>p { margin:10px; padding:10px; }</style>

</head>
<body>
  <p><span>Hello</span>, how are you?</p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

end()

.end()

.end()

דוגמאות

דוגמה 1

דוגמאות 2

תגובות