eq()

eq( index )

מחזירה: jQuery

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

.eq( index )

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

index

מספר שלם

מספר שלם, המציין מיקום של אלמנט.

.eq( -index )

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

-index

מספר שלם

מספר שלם, המציין מיקום של אלמנט, לספור לאחור מאלמנט אחרון בקבוצה.

אובייקט jQuery הנתון, המייצג קבוצה של אלמנטים של DOM, שיטה .eq() מייצרת אובייקט חדש jQuery מאחד האלמנטים בהתאמה.

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

<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').eq(2).css('background-color', 'red');

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

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

הפעם אלמנט של רשימה מספר 4 מקבל רקע אדום, מכיוון שהוא שני מסוף הרשימה.

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

אם סופק מספר שלילי, הוא מצביע למקום שמתחיל מסוף הרשימה ולא מהתחלתה. לדוגמה:

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

דוגמאות

דוגמה 1

הופך לכחול div עם אינדקס 2 באמצעות הוספת class.

    $("div").eq(2).addClass("blue");

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

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

  $(document).ready(function(){
    
    $("div").eq(2).addClass("blue");


  });
  </script>

  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
  </style>
</head>

<body>
  <div></div>
  <div></div>

  <div></div>
  <div></div>

  <div></div>
  <div></div>

</body>
</html>