المحدد `‎‎‎:nth-of-type()‎`‎ في jQuery

المحدد `()‎:nth-of-type`

الوصف

يختار هذا المحدِّد عناصر ذات موقع محدد ضمن مجموعة من العناصر الأخوة (أي جميعها أبناء لعناصر أخرى) التي لها اسم العنصر ذاته.

`jQuery( ":nth-of-type(index/even/odd/equation)" )‎`

أُضيف مع الإصدار: 1.9.

`index`

فهرس العنصر الابن المراد مطابقته، ويبدأ العد من القيمة 1 بدءًا من بداية المجموعة (أي فهرس أول عنصر في المجموعة هو 1). ويمكن استعمال الكلمة المحجوزة even التي تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أو الكلمة المحجوزة odd التي تُمثِّل العناصر التي يكون ترتيبها بين إخوتها زوجيًا، أو معادلات من الشكل An+B الذي يُمثِّل العناصر التي لها ترتيبٌ رقميٌ بين أخوتها يُطابِق النمط An+B، وذلك لكل قيمة موجبة أو تساوي الصفر للمتغير n. يمثّل ‎:nth-child(4n)‎ مثلًا العناصر التي ترتيبها من مضاعفات العدد 4.

بما أنَّ المحدِّدات ‎:nth-‎ مشتقة كليًّا من نظيراتها في مواصفة CSS، فإنَّها تستعمل فهرس أحادي (1‎-indexed) أي يبدأ العد من القيمة 1. على النقيض، تتبع بقية المحدِّدات مثل المحدِّد ‎:eq()‎ والمحدِّد ‎:even خطى JavaScript في طريقة فهرسة العناصر، إذ تستعمل فهرس صفري (‎0-indexed) أي يبدأ العد من القيمة 0.

يمكن الرجوع إلى مواصفة W3C CSS للاطلاع على الاستعمالات غير الاعتيادية لهذا المحدِّد.

أمثلة

إيجاد العنصر <span> الثاني نسبةً إلى إخوته:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>nth-of-type مثالٌ عن استعمال التابع</title>
  <style>
  .nth {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>عمر</span>,
  <b>رهام</b>,
  <span>عبد الحميد</span>,
  <b>هادي</b>,
  <span>أسامة</span>
</div>
<div>
  <b>أحمد</b>,
  <span>خديجة</span>
</div>
<div>
  <i><span>سارة</span></i>,
  <span>بانة</span>,
  <span>شادي</span>,
  <span>ماريا</span>
</div>
 
<script>
$( "span:nth-of-type(2)" )
  .append( "<span> هو العنصر الأخ الثاني للعنصر ذي النوع span</span>" )
  .addClass( "nth" );
</script>
 
</body>
</html>

مصادر

صفحة المحدِّد ‎‎:nth-of-type()‎ في توثيق jQuery الرسمي.

المحدد `‎‎‎:nth-of-type()‎`‎ في jQuery

محتويات