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

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

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

=== <code>jQuery( ":nth-last-child(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>، وذلك لكل قيمة موجبة أو تساوي الصفر للمتغير <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>[[jQuery/nth child selector|$( "li:nth-child(1)" )]]</code>‎ العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> الأول بينما سيختار المحدِّد ذو الشكل <code>‎$( "li:nth-last-child(1)" )‎</code> العنصر الثالث الأخير.

يمكن الرجوع إلى [https://www.w3.org/TR/css3-selectors/#nth-last-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-last-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-last-child(2)" ).append( "<span> - العنصر قبل الأخير</span>" );
</script>
 
</body>
</html>
</syntaxhighlight>المثال التالي يوضح كيفية عمل المحدِّد عند تمرير أنماط مختلفة لقيمة الفهرس إليه:<syntaxhighlight lang="html">
<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>nth-last-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-last-child(even)</button>
  <button>:nth-last-child(odd)</button>
  <button>:nth-last-child(3n)</button>
  <button>:nth-last-child(2)</button>
</div>
<div>
  <button>:nth-last-child(3n+1)</button>
  <button>:nth-last-child(3n+2)</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-last-child-selector/ صفحة المحدِّد ‎‎:nth-last-child()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Selectors]]