jQuery 3.3

.index()




jquery

.index () إرجاع: Integer

الوصف: ابحث عن عنصر معين من بين العناصر المتطابقة.

  • الإصدار المضاف: 1.4 .index()

    • هذا التوقيع لا يقبل أي حجج.
  • الإصدار المضافة: 1.4 .index (محدد)

    • منتخب
      النوع: Selector
      محدد يمثل مجموعة jQuery التي تبحث فيها عن عنصر.
  • الإصدار المضاف: 1.0 .index (عنصر)

    • جزء
      النوع: Element أو jQuery
      عنصر DOM أو العنصر الأول داخل كائن jQuery الذي تبحث عنه.

قيم العودة

إذا لم يتم تمرير أي وسيطة إلى طريقة .index() ، تكون قيمة الإرجاع عبارة عن عدد صحيح يشير إلى موضع العنصر الأول داخل كائن jQuery نسبة إلى عناصر الأخوة.

إذا تم .index() على مجموعة من العناصر وعنصر DOM أو تم تمرير كائن jQuery في ، .index() بإرجاع عدد صحيح يشير إلى موضع العنصر الذي تم تمريره نسبة إلى المجموعة الأصلية.

إذا تم تمرير سلسلة محدد كوسيطة ، يقوم .index() بإرجاع عدد صحيح يشير إلى موضع العنصر الأول داخل كائن jQuery نسبة إلى العناصر المتطابقة بواسطة المحدد. إذا لم يتم العثور على العنصر ، .index() -1.

التفاصيل

يمكن أن .get() العملية التكميلية إلى .get() ، التي تقبل فهرسًا وترجع عقدة 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 ) );

نستعيد الموضع الذي يستند إلى الصفر في عنصر القائمة:

الفهرس: 1

وبالمثل ، إذا قمنا باسترداد كائن jQuery يتألف من أحد عناصر القائمة الثلاثة ، .index() بالبحث عن عنصر القائمة هذا:

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

نستعيد الموضع الذي يستند إلى الصفر في عنصر القائمة:

الفهرس: 1

لاحظ أنه إذا كانت مجموعة jQuery المستخدمة .index() الطريقة .index() تحتوي على أكثر من عنصر واحد ، فسيتم استخدام العنصر الأول داخل مجموعة العناصر المتطابقة.

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

نستعيد الموضع الصفري لعنصر القائمة الأول ضمن المجموعة المتطابقة:

الفهرس: 1

إذا استخدمنا سلسلة .index() الطريقة .index() تفسيرها كسلسلة محدد jQuery. يقع العنصر الأول بين العناصر المطابقة للكائن والتي تطابق هذا المحدد أيضًا.

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

نستعيد الموضع الذي يستند إلى الصفر في عنصر القائمة:

الفهرس: 1

إذا قمنا بحذف الحجة ، .index() بإرجاع موضع العنصر الأول ضمن مجموعة العناصر المتطابقة بالنسبة إلى الأشقاء:

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

مرة أخرى ، نستعيد الموضع الصفري لعنصر القائمة:

الفهرس: 1

أمثلة:

عند النقر فوق ، يتم إرجاع الفهرس (الذي يستند إلى صفر) الخاص بهذا المستند في الصفحة.

<!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>

عرض:

لعرض الفهرس الخاص بالعنصر مع شريط المعرف.

<!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>

عرض:

لعرض الفهرس الخاص بالعنصر مع شريط المعرف بالنسبة لجميع عناصر <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>

عرض:

لعرض الفهرس الخاص بالعنصر مع شريط معرف بالنسبة إلى الأشقاء.

<!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>

عرض: