المحدد :nth-child() في jQuery
المحدِّد ():nth-child
الوصف
يختار هذا المحدِّد عناصرًا ذات موقع محدَّد ضمن مجموعة من العناصر الأخوة (أي جميعها أبناء لعناصر أخرى).
jQuery( ":nth-child(index/even/odd/equation)" )
أُضيف مع الإصدار: 1.1.4.
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:eq(1)" ) العنصر الثاني.
الصنف الزائف :nth-child(n) (أي pseudo-class) والمحدِّد :eq(n) قد يسببان حيرةً عند المفاضلة بينهما، إذ يمكن أن تختلف نتيجتهما إلى حد كبيرة إن وازنا بين العناصر التي يطابقها كلاهما. في الصنف الزائف :nth-child(n)، تُحصى جميع العناصر الأبناء بغض النظر عن ماهيتها ثم تُختار عناصر محدَّدة إن طابقت المحدِّد المرتبط بهذا الصنف الزائف فقط. أمَّا في المحدد :eq()، تُحصى العناصر التي يطابقها المحدِّد المرتبط بالصنف الزائف فقط ولا تقتصر على أبناء أي عنصر آخر ثم يُختار العنصر ذو الفهرس n + 1 (لا تنسى أنَّ الفهرس هنا صفري أي تبدأ n من الصفر).
يمكن الرجوع إلى مواصفة W3C CSS للاطلاع على الاستعمالات غير الاعتيادية لهذا المحدِّد.
أمثلة
إيجاد العنصر <li> الثاني في كل عنصر <ul> مطابق وإضافة نص إليه:
<!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>
المثال التالي يوضح كيفية عمل المحدِّد عند تمرير أنماط مختلفة للفهرس إليه. لاحظ أنَّ هذا مختلف عن المحدِّد :even والمحدِّد :odd الذَان لا يراعيان العنصر الأب مطلقًا إذ يرشحان قائمة العناصر فقط لكل عنصر. يَعدُّ المحدِّد :nth-child() موقع العنصر نسبةً إلى العنصر الأب له. على أي حال، أفضل الشرح هو التجريب العملي، لذا تفحَّص جيدًا هذا المثال:
<!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>