التابع .eq() في jQuery
.eq( index )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
تقليص مجموعة العناصر المتطابقة إلى تلك الموجودة في الفهرس المُحدَد.
.eq( index )
أُضيف مع الإصدار: 1.1.2.
index
عدد صحيح يشير إلى الموضع الصفري للعنصر، وهو من النوع Number.
.eq( indexFromEnd )
أُضيف مع الإصدار: 1.4.
indexFromEnd
عدد صحيح يشير إلى موضع العنصر، مع العد تنازليا من العنصر الأخير في المجموعة، وهو من النوع Number.
إذا كان لدينا كائن jQuery يمثل مجموعة من عناصر DOM، فسينشئ التابع .eq() كائن jQuery جديد من عنصر واحد داخل هذه المجموعة. يُحدِّد الفهرس المُدخَل موضعَ هذا العنصر في المجموعة.
إليك صفحة بها قائمة بسيطة:
<ul>
<li>البند رقم 1</li>
<li>البند رقم 2</li>
<li>البند رقم 3</li>
<li>البند رقم 4</li>
<li>البند رقم 5</li>
</ul>
يمكننا تطبيق هذا التابع على مجموعة عناصر القائمة:
$( "li" ).eq( 2 ).css( "background-color", "red" );
ينتج عن هذا الاستدعاء خلفية حمراء للعنصر 3. لاحظ أن الفهرس المُعطى صفري الأساس، ويشير إلى موضع العنصر داخل كائن jQuery، وليس داخل شجرة DOM. ويشير إدخال رقم سالب إلى موضع يبدأ من نهاية المجموعة، بدلاً من البداية. ومثال على ذلك:
$( "li" ).eq( -2 ).css( "background-color", "red" );
يتحول عنصر القائمة رقم 4 في الوقت الحالي إلى اللون الأحمر، حيث إنه الثاني من نهاية المجموعة.
إذا تعذر العثور على عنصر في الفهرس الصفري، يقوم التابع بإنشاء كائن jQuery جديد مع مجموعة فارغة وخاصية طولها length بالقيمة 0.
$( "li" ).eq( 5 ).css( "background-color", "red" );
في هذه الحالة، لا يتحول أي من عناصر القائمة إلى اللون الأحمر، حيث يشير .eq( 5 ) إلى العنصر السادس من قائمة الخمسة عناصر.
أمثلة
تحويل <div> ذو الفهرس 2 إلى اللون الأزرق عن طريق إضافة صنف مناسب:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq مثال على التابع</title>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
border: 2px solid blue;
}
.blue {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
</script>
</body>
</html>