jQuery تمرين - طريقة eq()

jQuery تمرين مرجع

مثال

من خلال إضافة فئة مناسبة إلى div الذي له index 2، يمكن تحويله إلى اللون الأزرق:

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

تجربة شخصية

تعريف والاستخدام

يقلل طريقة eq() مجموعة العناصر التي تتطابق مع العنصر في الموقع المحدد من index.

النحو

.eq(index)
معرف وصف
index

عدد صحيح، يشير إلى موقع العنصر (أقل من 0).

إذا كان الرقم سالب، فإنه يبدأ من الأخير في المجموعة.

شرح مفصل

إذا تم تقديم جسم jQuery يمثل مجموعة عناصر DOM، فإن طريقة .eq() تستخدم عنصرًا واحدًا من المجموعة لإنشاء جسم jQuery جديد. يُشير معرف index المستخدم إلى موقع العنصر في المجموعة.

انظر إلى القائمة البسيطة التالية:

<ul>
  <li>عنصر القائمة 1</li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
  <li>عنصر القائمة 4</li>
  <li>عنصر القائمة 5</li>
</ul>

مثال 1

يمكننا تطبيق هذه الطريقة على مجموعة هذه العناصر في القائمة:

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

تجربة شخصية

نتيجة لهذا النداء هو تعيين خلفية المشروع 3 إلى اللون الأحمر. يرجى ملاحظة أن index معتمد على الصفر، وهو موقع العنصر في جسم jQuery، وليس في شجرة DOM.

مثال 2

إذا تم تقديم عدد سالب، فإنه يشير إلى موقع من نهاية المجموعة بدلاً من البداية. على سبيل المثال:

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

تجربة شخصية

في هذه المرة، أصبح لون الخلفية للمشروع 4 أحمر، لأنه هو الثاني من نهاية المجموعة.

مثال 3

إذا لم يتم العثور على العنصر بناءً على معرف index المحدد، فإن هذه الطريقة تصنع جسم jQuery يحتوي على مجموعة فارغة، مع خاصية length تساوي 0.

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

تجربة شخصية

هنا، لا يتم تغيير أي عنصر من القائمة إلى اللون الأحمر، لأن .eq(5) يشير إلى العنصر السادس في القائمة.

jQuery تمرين مرجع