المحدد :nth-last-of-type() في jQuery
المحدد ():nth-last-of-type
الوصف
يختار هذا المحدِّد عناصر ذات موقع محدَّد ضمن مجموعة من العناصر الأخوة (أي جميعها أبناء لعناصر أخرى) التي لها اسم العنصر ذاته وذلك بدءًا من نهاية المجموعة وحتى بدايتها.
jQuery( ":nth-last-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. إن كان لدينا مثلًا قائمة غير مرتبة <ul> تحتوي على ثلاثة عناصر <li>، فسيختار المحدِّد ذو الشكل $( "li:nth-child(1)" ) العنصر <li> الأول بينما سيختار المحدد ذو الشكل $('li:nth-last-of-type(1)') العنصر الثالث الأخير.
يمكن الرجوع إلى مواصفة W3C CSS للاطلاع على الاستعمالات غير الاعتيادية لهذا المحدِّد.
أمثلة
إيجاد العنصر <li> الثاني حتى الأخير في كل عنصر <ul> مطابق وإضافة نص إليه:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>nth-last-of-type مثالٌ عن استعمال المحدد</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-of-type(2)" ).append( "<span> - العنصر قبل الأخير</span>" );
</script>
</body>
</html>
المثال التالي يوضح كيفية عمل المحدِّد مع تمرير أنماط مختلفة لقيمة الفهرس إليه:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>nth-last-of-type مثالٌ عن استعمال المحدد</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-of-type(even)</button>
<button>:nth-last-of-type(odd)</button>
<button>:nth-last-of-type(3n)</button>
<button>:nth-last-of-type(2)</button>
</div>
<div>
<button>:nth-last-of-type(3n+1)</button>
<button>:nth-last-of-type(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>