index()

מחזירה: מספר

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

ארגומנטים

.index()

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

.index(selector)

סלקטור

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

סלקטור, שמייצג אוסף jQuery שבו מחפש עבור אלמנט.

.index(element)

אלמנט

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

אלמנט DOM או אלמנט ראשון בתוך אובייקט jQuery שמחפשים אותו.

ערכים מוחזרים

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

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

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

פרטים

בנוסף ל- .get(), שמקבל אינדקס ומחזיר צומת, .index() יכול לקבל צומת DOM ולהחזיר אינדקס. נניח יש לנו רשימה פשוטה לא מסודרת בדף:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

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

var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
אנחנו נקבל מיקום שמתחיל מאפס של אלמנט ברשימה:

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

Index: 1

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

var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));

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

Index: 1

שימו לב, אם אוסף של jQuery משתמש כארגומנט של שיטה .index(), המכיל יותר מאלמנט אחד, אלמנט ראשון בתוך רשימת האלמנטים ישמש.

var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));

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

Index: 1

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

var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));

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

Index: 1

אם אנחנו לא נשלח אלמנט, .index() תחזיר מיקום של אלמנט ראשון מתוך אלמנטים בהתאמה יחסית לאלמנטים אחים:

alert('Index: ' + $('#bar').index();

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

Index: 1

דוגמאות

דוגמה 1

בלחיצה מחזיר אינדקס של div בדף.

$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});

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

נסה זאת בעצמך

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

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

<html>
<head>

  <style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>

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

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});
});

</script>

</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>

<div>Third div</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מחזיר אינדקס של האלמנט עם ID bar.

    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );

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

נסה זאת בעצמך

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

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

<html>
<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מחזיר אינדקס של אלמנט ראשון באוסף jQuery.

var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );

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

נסה זאת בעצמך

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

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

<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
});

</script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 4

מחזיר אינדקס של אלמנט עם ID bar יחסית לכל אלמנטים 'li'.

$('div').html('Index: ' +  $('#bar').index('li') );

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

נסה זאת בעצמך

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
$('div').html('Index: ' +  $('#bar').index('li') );
});

</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 5

מחזיר אינדקס של האלמנט עם ID bar יחסית לאחים שלו.

var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );

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

נסה זאת בעצמך

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 6

מחזיר -1 , מכיוון שאין כאן אלמנט עם ID foobar.

var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);

The output of the code above will be:

נסה זאת בעצמך

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

נסה זאת בעצמך

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

כן לא

index()

index()

ארגומנטים

ערכים מוחזרים

פרטים

דוגמאות

דוגמה 1

דוגמה 2

דוגמה 3

דוגמה 4

דוגמה 5

דוגמה 6

תגובות