التابع .index() في jQuery
.index()
القيم المعادة
يعيد عددًا صحيحًا من النوع Number.
الوصف
يبحث هذا التابع عن عنصر معين من بين العناصر المطابقة.
.index()
أضيف مع الإصدار: 1.4، ولا يقبل هذا الشكل للتابع أي معاملات.
.index( selector )
أضيف مع الإصدار: 1.4.
selector
محدد يمثل مجموعة jQuery التي نبحث فيها عن عنصر معين.
.index ( element )
أضيف مع الإصدار: 1.0.
element
عنصر DOM أو أول عنصر في كائن jQuery و الذي سنبحث عنه في مجموعة العناصر المطابقة.
القيم المعادة
إذا لم يُمرر أي معامل للتابع ()index.، فإن القيمة المعادة هي عدد صحيح طبيعي يمثل موقع أول ظهور للعنصر المبحوث عنه في كائن jQuery نسبة إلى إخوته من العناصر (siblings).
إذا استعمل التابع ()index. مع مجموعة من العناصر ومُرِّر إليه عنصر DOM أو كائن jQuery، فسيعيد التابع في هذه الحالة عددًا صحيحًا طبيعيًا يمثل موقع المعامل في مجموعة العناصر المطابقة نسبة إلى المجموعة الأصلية.
إذا مُرِّرت سلسلة نصية تُمثل محدد jQuery إلى التابع ()index.، فسيعيد عددًا صحيحًا طبيعيًا يمثل موقع العنصر الأول الذي عثر عليه في مجموعة jQuery نسبة إلى العناصر المطابقة التي اختيرت بواسطة ذلك المحدد. إذا لم يُعثر على أي عنصر، فسيعيد التابع ()index. القيمة -1.
تفاصيل إضافية
العملية المكملة للتابع ()get.، التي تقبل قيمة الفهرس (index) كمعامل وتعيد عنصر DOM، هي استعمال التابع ()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.:
Index: 1
بالمثل، إذا استرجعنا كائن jQuery يتكون من أحد عناصر القائمة الثلاثة، فسيبحث التابع ()index. عن هذا العنصر:
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
إذا كان كائن jQuery الممرر كمعامل للتابع .index()، يحتوي على أكثر من عنصر واحد، فسيُستعمَل أول عنصر من مجموعة العناصر المطابقة.
var listItems = $( "li:gt(0)" );
alert( "Index: " + $( "li" ).index( listItems ) );
نحصل على موضع ذي أساس صفري لعنصر القائمة الممرر للتابع ()index. :
Index: 1
إذا مررنا للتابع ()index. سلسلة نصية كمعامل، فستفسَّر هذه السلسلة على أنها محدد jQuery. سيُحدد موضع أول عنصر في مجموعة العناصر المطابقة والتي تطابق أيضًا المحدد الممرر كمعامل.
var listItem = $( "#bar" );
alert( "Index: " + listItem.index( "li" ) );
نحصل على موضع ذي أساس صفري لعنصر القائمة المنتقى:
Index: 1
إذا لم نمرر أي معامل للتابع ()index.، فسيعيد موضع العنصر الأول من بين العناصر المطابقة نسبة إلى موقعه ضمن إخوته من العناصر .
alert( "Index: " + $( "#bar" ).index() );
نحصل مرةً أخرى على موضع ذي أساس صفري لعنصر القائمة المنتقى:
Index: 1
أمثلة
إعادة موضع العنصر <div> عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
background: yellow;
margin: 5px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
$( "div" ).click(function() {
// `this` is the DOM element that was clicked
var index = $( "div" ).index( this );
$( "span" ).text( "That was div index #" + index );
});
</script>
</body>
</html>
إعادة موضع العنصر الذي يمتلك المعرف "bar":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>
var listItem = $( "#bar" );
$( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
</script>
</body>
</html>
إعادة موضع العنصر الأول في مجموعة jQuery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>
var listItems = $( "li:gt(0)" );
$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
</script>
</body>
</html>
إعادة موضع العنصر الذي يمتلك المعرف "bar" المرتبط بكل عناصر <li> الموجودة في الصفحة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>
$( "div" ).html( "Index: " + $( "#bar" ).index( "li" ) );
</script>
</body>
</html>
إعادة موضع العنصر الذي يمتلك المعرف "bar" نسبةً إلى علاقته مع إخوته (siblings):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>
var barIndex = $( "#bar" ).index();
$( "div" ).html( "Index: " + barIndex );
</script>
</body>
</html>
إعادة القيمة -1 لأنه ليس هناك أي عنصر يمتلك المعرف "foobar":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>
var foobar = $( "li" ).index( $( "#foobar" ) );
$( "div" ).html( "Index: " + foobar );
</script>
</body>
</html>