الفرق بين المراجعتين لصفحة: «jQuery/lt selector»
جميل-بيلوني (نقاش | مساهمات) إضافة محتويات الصفحة. |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:lt()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:lt()</code> في jQuery}}</noinclude> | ||
== | == المحدد <code>():lt</code> == | ||
=== الوصف === | === الوصف === | ||
| سطر 25: | سطر 25: | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
لما كان المحدد <code>:lt()</code> ملحقًا بمكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإنَّ الاستعلامات التي تستخدم <code>:lt()</code> لن تستفيد من سرعة الأداء الذي يوفرها تابع DOM الأصلي <code>querySelectorAll()</code>. للحصول على أفضل أداء في المتصفحات الحديثة، استعمل <code>$("your-pure-css-selector").slice(0, index)</code> بدلًا من ذلك. | لما كان المحدد <code>:lt()</code> ملحقًا بمكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإنَّ الاستعلامات التي تستخدم <code>:lt()</code> لن تستفيد من سرعة الأداء الذي يوفرها تابع DOM الأصلي [[JavaScript/Document/querySelectorAll|<code>querySelectorAll()</code>]]. للحصول على أفضل أداء في المتصفحات الحديثة، استعمل <code>$("your-pure-css-selector").[[JavaScript/Array/slice|slice]](0, index)</code> بدلًا من ذلك. | ||
=== أمثلة === | === أمثلة === | ||
تغيير لون خلفية العناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الأربعة الأولى (فهرسها أقل من 4) إلى اللون الأصفر، وتغيير لون النص للعناصر التي فهرسها أقل من القيمة -2 إلى اللون الأحمر: | تغيير لون خلفية العناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الأربعة الأولى (فهرسها أقل من 4) إلى اللون الأصفر، وتغيير لون النص للعناصر التي فهرسها أقل من القيمة -2 إلى اللون الأحمر:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
مراجعة 08:16، 30 مايو 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="en">
<head>
<meta charset="utf-8">
<title>lt demo</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>