عرض مصدر jQuery/nth of type selector

<noinclude>{{DISPLAYTITLE:المحدد <code>‎‎‎:nth-of-type()‎</code>‎ في jQuery}}</noinclude>
== المحدد <code>()‎:nth-of-type</code> ==

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

=== <code>jQuery( ":nth-of-type(index/even/odd/equation)" )‎</code> ===
أُضيف مع الإصدار: 1.9.

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

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

يمكن الرجوع إلى [https://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo مواصفة W3C CSS] للاطلاع على الاستعمالات غير الاعتيادية لهذا المحدِّد.

=== أمثلة ===
إيجاد العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> الثاني نسبةً إلى إخوته:<syntaxhighlight lang="html">
<!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>

</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/nth-of-type-selector/ صفحة المحدِّد ‎‎:nth-of-type()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Selectors]]