الفرق بين المراجعتين لصفحة: «jQuery/lt selector»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| سطر 30: | سطر 30: | ||
تغيير لون خلفية العناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الأربعة الأولى (فهرسها أقل من 4) إلى اللون الأصفر، وتغيير لون النص للعناصر التي فهرسها أقل من القيمة -2 إلى اللون الأحمر:<syntaxhighlight lang="html"> | تغيير لون خلفية العناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الأربعة الأولى (فهرسها أقل من 4) إلى اللون الأصفر، وتغيير لون النص للعناصر التي فهرسها أقل من القيمة -2 إلى اللون الأحمر:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang=" | <html lang="ar"> | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>lt | <title>lt مثالٌ عن استعمال المحدد</title> | ||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
</head> | </head> | ||
| سطر 55: | سطر 55: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/lt-selector/ صفحة المحدِّد :lt() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/lt-selector/ صفحة المحدِّد :lt() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Selectors]] | [[تصنيف:jQuery Selectors]] | ||
المراجعة الحالية بتاريخ 10:39، 4 يونيو 2018
المحدد ():lt
الوصف
يختار هذا المحدِّد جميع العناصر التي فهرسها أقل من القيمة index المعطاة في المجموعة المطابقة.
jQuery( ":lt(index)" )
أُضيف مع الإصدار: 1.0.
index
فهرس صفري.
jQuery( ":lt(-index)" )
أُضيف مع الإصدار: 1.8.
indexFromEnd
فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا بدءًا من العنصر الأخير.
المحددات المرتبطة بالفهارس
ترشِّح المحددات المرتبطة بالفهارس (من ضمنها هذا المحدِّد) مجموعة العناصر التي طابقت التعبيرات التي تسبقها؛ وهي تُضيِّق المجموعة على أساس ترتيب العناصر داخل هذه المجموعة المتطابقة. على سبيل المثال، إذا حُدِّدت العناصر أولاً باستخدام محدِّد صنف (.myclass) وأُعيدت أربعة عناصر، فستعطى هذه العناصر الفهارس من 0 إلى 3 لأغراض هذه المحددات.
لاحظ أنَّه نظرًا لأن مصفوفات JavaScript تستخدم الفهرسة الصفرية، فإنَّ هذه المحدِّدات تفعل الأمر نفسه. وهو السبب في تحديد $( ".myclass:eq(1)" ) العنصر الثاني في المستند ذات الصنف myclass بدلاً من الأول. في المقابل، يستخدم :nth-child(n) فهرسة أحادية لتتوافق مع مواصفات CSS.
قبل الإصدار jQuery 1.8، لم يكن المحدِّد :lt(index) يقبل قيمة سالبة للفهرس index.
ملاحظات إضافية
لما كان المحدد :lt() ملحقًا بمكتبة jQuery وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستخدم :lt() لن تستفيد من سرعة الأداء الذي يوفرها تابع DOM الأصلي querySelectorAll(). للحصول على أفضل أداء في المتصفحات الحديثة، استعمل $("your-pure-css-selector").slice(0, index) بدلًا من ذلك.
أمثلة
تغيير لون خلفية العناصر <td> الأربعة الأولى (فهرسها أقل من 4) إلى اللون الأصفر، وتغيير لون النص للعناصر التي فهرسها أقل من القيمة -2 إلى اللون الأحمر:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>lt مثالٌ عن استعمال المحدد</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
$( "td:lt(4)" ).css( "backgroundColor", "yellow" );
$( "td:lt(-2)" ).css( "color", "red" );
</script>
</body>
</html>