slice()

.slice( start, [ end ] )

מחזירה: jQuery

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

.slice( start, [ end ] )

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

start

מספר שלם

מספר שלם המציין מיקום (מתחיל מ-0), שאחריו אלמנטים נבחרים. אם מספר שלילי, הוא מציין על הזזה מסוף רשימה.

end (אופציאונלי)

מספר שלם

מספר שלם המציין מיקום (מתחיל מ-0), שלפניו אלמנטים מפסיקים להיות מובחרים. אם מספר שלילי הוא מצביע על הזזה מסוף הקבוצה. אם לא צוין, סוף של תת קבוצה הוא סוף של רשימה.

אובייקט הנתון jQuery שמציג סט אלמנטים DOM, שיטה .slice() מייצרת אובייקט חדש jQuery מתוך קבוצת אלמנטים בהתאמה. אינדקס הנתון start מגדיר מיקום אחד מהאלמנטים בקבוצה; אם end לא הוגדר, כל האלמנטים אחרי start יכנסו כתוצאה.

נתבונן על רשימה פשוטה:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

אנחנו יכולים ליישם את השיטה כדי להגדיר את הפריטים ברשימה:

$('li').slice(2).css('background-color', 'red');

תוצאת קריאה הזו היא רקע אדום עבור פריטים 3, 4, ו- 5. שימו לב, שאינדקס מתחיל מ-0, ומתייחס למיקום של אלמנטים בתוך אובייקט jQuery, ולא בתוך עץ DOM.

list item 1
list item 2
list item 3
list item 4
list item 5

פרמטר end מאפשר לנו לצמצם את טווח נבחר עוד יותר. לדוגמה:

$('li').slice(2, 4).css('background-color', 'red');

עכשיו רק פריטים 3 ו- 4 נבחרו. אינדקס מתחיל מ-0; טווח נמשך עד, אבל לא כולל אינדקס שצוין.

list item 1
list item 2
list item 3
list item 4
list item 5

אינדקסים שליליים

שיטה jQuery .slice() היא דוגמה של שיטה JavaScript .slice() עבור מערכים. אחד מאפשרויות היא העברה מספרים שליליים, שמועברים או שכפרמטר start, או כי end. אם מספר שלילי מסופק, הוא מצביע על מקום, שמתחיל מסוף הרשימה, ולא מהתחלה. לדוגמה:

$('li').slice(-2, -1).css('background-color', 'red');

הפעם, רק פריט 4 מקבל צמבע אדום, מכיוון שהוא אלמנט יחיד בטווח 2 מהסוף (-2) ו-1 מהסוף (-1).

list item 1
list item 2
list item 3
list item 4
list item 5

דוגמאות

דוגמה 1

באופן אקראי מוסיף צבע רקע לאלמנטים div.

    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end) 
        $div.slice(start, end).css("background", "yellow");   
       else
        $div.slice(start).css("background", "yellow");
      
      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }
    $("button").click(colorEm);

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end) 
        $div.slice(start, end).css("background", "yellow");   
       else
        $div.slice(start).css("background", "yellow");
      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }

    $("button").click(colorEm);
  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
</head>
<body>
  <button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

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

$("p").slice(0, 1).wrapInner("<b></b>");

דוגמה 3

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

$("p").slice(0, 2).wrapInner("<b></b>");

דוגמה 4

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

$("p").slice(1, 2).wrapInner("<b></b>");

דוגמה 5

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

$("p").slice(1).wrapInner("<b></b>");

דוגמה 6

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

$("p").slice(-1).wrapInner("<b></b>");

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

כן לא

slice()

.slice( start, [ end ] )

.slice( start, [ end ] )

אינדקסים שליליים

דוגמאות

דוגמה 1

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

דוגמה 2

דוגמה 3

דוגמה 4

דוגמה 5

דוגמה 6

תגובות