nth الطفل محدد
الوصف: يختار جميع العناصر التي هي nth-child التابع لها.
الإصدار: 1.1.4 jQuery (": nth-child (index / even / odd / equation)")
index: مؤشر كل طفل ليتم مطابقته ، بدءًا من
1
، السلسلةeven
أوodd
، أو معادلة (على سبيل المثال:nth-child(even)
:nth-child(4n)
)
نظرًا لأن تنفيذ jQuery :nth-
selectors مشتق بشكل صارم من مواصفات CSS ، فإن قيمة n
هي "1-indexed" ، بمعنى أن العد يبدأ من 1. بالنسبة لتعبيرات محدد أخرى مثل :eq()
أو :even
jQuery يتبع عد جافا سكريبت "0-indexed". بالنظر إلى <ul>
واحد يحتوي على اثنين <li>
s ، يحدد $( "li:nth-child(1)" )
أول <li>
بينما يحدد $( "li:eq(1)" )
الثانية.
يتم الخلط بين :nth-child(n)
والزائفة بسهولة مع :eq(n)
، على الرغم من أن الاثنين يمكن أن يؤدي إلى عناصر متطابقة مختلفة بشكل كبير. مع :nth-child(n)
، يتم حساب جميع الأطفال ، بغض النظر عن ما هم عليه ، ويتم تحديد العنصر المحدد فقط إذا كان يتطابق مع المحدد المُلحق بالفئة الزائفة. باستخدام :eq(n)
يتم حساب المحدد الذي تم إرفاقه للفئة الزائفة فقط ، ولا يقتصر على الأطفال من أي عنصر آخر ، ويتم تحديد (n + 1) th one (n 0).
يمكن العثور على مزيد من المناقشة حول هذا الاستخدام غير العادي في مواصفات W3C CSS .
أمثلة:
العثور على لي الثاني في كل ul المتطابقة ولاحظ ذلك.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-child demo</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>John</li> <li>Karl</li> <li>Brandon</li> </ul> </div> <div> <ul> <li>Sam</li> </ul> </div> <div> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul> </div> <script> $( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" ); </script> </body> </html>
عرض:
هذا هو ملعب لمعرفة كيف يعمل محدد مع سلاسل مختلفة. لاحظ أن هذا يختلف عن: حتى و: الفردية التي ليس لها أي اعتبار للوالدين وقم فقط بتصفية قائمة العناصر إلى كل واحد آخر. في حين يقوم nth-child بحساب مؤشر الطفل لوالده الخاص. على أي حال ، من الأسهل أن نرى من شرح ذلك ...
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-child demo</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>John</td></tr> <tr><td>Karl</td></tr> <tr><td>Brandon</td></tr> <tr><td>Benjamin</td></tr> </table> </div> <div> <table> <tr><td>Sam</td></tr> </table> </div> <div> <table> <tr><td>Glen</td></tr> <tr><td>Tane</td></tr> <tr><td>Ralph</td></tr> <tr><td>David</td></tr> <tr><td>Mike</td></tr> <tr><td>Dan</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>