الفرق بين المراجعتين لصفحة: «jQuery/nth last child selector»

المراجعة الحالية بتاريخ 08:02، 6 يونيو 2018

المحدد `()‎:nth-last-child`

الوصف

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

`jQuery( ":nth-last-child(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. إن كان لدينا مثلًا قائمة غير مرتبة <ul> تحتوي على ثلاثة عناصر <li>، فسيختار المحدِّد ذو الشكل ‎$( "li:nth-child(1)" )‎ العنصر <li> الأول بينما سيختار المحدِّد ذو الشكل ‎$( "li:nth-last-child(1)" )‎ العنصر الثالث الأخير.

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

أمثلة

إيجاد العنصر <li> الثاني وحتى العنصر الأخير في كل عنصر <ul> مطابق وإضافة نص إليه:

<!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>

المثال التالي يوضح كيفية عمل المحدِّد عند تمرير أنماط مختلفة لقيمة الفهرس إليه:

<!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>

مصادر

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

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