عرض مصدر jQuery/nth child selector

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

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

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

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

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

الصنف الزائف <code>‎:nth-child(n)‎</code> (أي pseudo-class) والمحدِّد <code>[[jQuery/eq selector|‎:eq(n)]]</code>‎ قد يسببان حيرةً عند المفاضلة بينهما، إذ يمكن أن تختلف نتيجتهما إلى حد كبيرة إن وازنا بين العناصر التي يطابقها كلاهما. في الصنف الزائف ‎<code>:nth-child(n)</code>‎، تُحصى جميع العناصر الأبناء بغض النظر عن ماهيتها ثم تُختار عناصر محدَّدة إن طابقت المحدِّد المرتبط بهذا الصنف الزائف فقط. أمَّا في المحدد ‎<code>[[jQuery/eq selector|:eq()‎]]</code>، تُحصى العناصر التي يطابقها المحدِّد المرتبط بالصنف الزائف فقط ولا تقتصر على أبناء أي عنصر آخر ثم يُختار العنصر ذو الفهرس n + 1 (لا تنسى أنَّ الفهرس هنا صفري أي تبدأ n من الصفر).

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

=== أمثلة ===
إيجاد العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> الثاني في كل عنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> مطابق وإضافة نص إليه:<syntaxhighlight lang="html">
<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>nth-child مثال عن استعمال المحدد</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>مجد</li>
    <li>ماريا</li>
    <li>بشير</li>
  </ul>
</div>
<div>
  <ul>
    <li>حسام</li>
  </ul>
</div>
<div>
  <ul>
    <li>محمد</li>
    <li>طه</li>
    <li>جميل</li>
    <li>يحيى</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-child(2)" ).append( "<span> - العنصر الثاني</span>" );
</script>
 
</body>
</html>

</syntaxhighlight>المثال التالي يوضح كيفية عمل المحدِّد عند تمرير أنماط مختلفة للفهرس إليه. لاحظ أنَّ هذا مختلف عن المحدِّد <code>[[jQuery/even selector|‎:even]]</code> والمحدِّد <code>[[jQuery/odd selector|‎:odd]]</code> الذَان لا يراعيان العنصر الأب مطلقًا إذ يرشحان قائمة العناصر فقط لكل عنصر. يَعدُّ المحدِّد <code>‎:nth-child()‎</code> موقع العنصر نسبةً إلى العنصر الأب له. على أي حال، أفضل الشرح هو التجريب العملي، لذا تفحَّص جيدًا هذا المثال:<syntaxhighlight lang="html">
<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>nth-child مثالٌ عن استعمال المحدد</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button>:even</button>
  <button>:odd</button>
</div>
 
<div>
  <table>
    <tr><td>عبد اللطيف</td></tr>
    <tr><td>راما</td></tr>
    <tr><td>بشير</td></tr>
    <tr><td>جميل</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>حسام</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>زهرة</td></tr>
    <tr><td>ليا</td></tr>
    <tr><td>مجد</td></tr>
    <tr><td>نائل</td></tr>
    <tr><td>لبنى</td></tr>
    <tr><td>آية</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>

</syntaxhighlight>

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