الفرق بين المراجعتين لصفحة: «jQuery/gt selector»
جميل-بيلوني (نقاش | مساهمات) هذه الصفحة من مساهمات عدنان أمزيان. |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:gt()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:gt()</code> في jQuery}}</noinclude> | ||
== المحدد :gt() == | == المحدد <code>:gt()</code> == | ||
=== الوصف === | === الوصف === | ||
| سطر 20: | سطر 20: | ||
تنتقي المحددات المتعلقة بالفهرس مجموعةً من العناصر التي تطابقت مع التعابير سابقًا. إذ تقلِّص العناصر بناءً على ترتيبها في المجموعة المتطابقة. لنفترض مثلا أنه حُدِّدت أولًا العناصر الموجودة في محدد الصنف (<code>.myclass</code>) وأُعيدت آنذاك أربعة عناصر، فستكون فهارس هذه العناصر هي من 0 وحتى 3 من أجل أن يستعملها هذا النوع من المحددات (المحددات المتعلقة بالفهرس). | تنتقي المحددات المتعلقة بالفهرس مجموعةً من العناصر التي تطابقت مع التعابير سابقًا. إذ تقلِّص العناصر بناءً على ترتيبها في المجموعة المتطابقة. لنفترض مثلا أنه حُدِّدت أولًا العناصر الموجودة في محدد الصنف (<code>.myclass</code>) وأُعيدت آنذاك أربعة عناصر، فستكون فهارس هذه العناصر هي من 0 وحتى 3 من أجل أن يستعملها هذا النوع من المحددات (المحددات المتعلقة بالفهرس). | ||
لاحظ بما أن فهارس المصفوفات في الجافاسكربت تبدأ من الصفر، فإن المحددات في jQuery تسلك ذلك السلوك أيضًا. هذا يفسر لماذا يختار المحدد عند استعماله بالشكل <code>$( | لاحظ بما أن فهارس المصفوفات في الجافاسكربت تبدأ من الصفر، فإن المحددات في jQuery تسلك ذلك السلوك أيضًا. هذا يفسر لماذا يختار المحدد عند استعماله بالشكل <code>$('.myclass :gt(1)')</code> العناصر التي تقع بعد العنصر الثاني المتواجدة في الصفحة وذات الصنف <code>myclass</code> وليس أول عنصر. لكن في المقابل، المُحدِّد <code>[[jQuery/nth child selector|:nth-child()]]</code> يبدأ العدّ من الفهرس 1، وذلك كي يوافق مواصفة CSS. | ||
لم يكن المحدد <code>:gt()</code> قبل jQuery 1.8 يقبل قيمة سالبة للمعامل <code>index</code>. | لم يكن المحدد <code>:gt()</code> قبل jQuery 1.8 يقبل قيمة سالبة للمعامل <code>index</code>. | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
لمّا كان المحدد <code>:gt()</code> هو ملحق تابع لمكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإن الاستعلامات التي تستعمل <code>:gt()</code> لا يمكنها الاستفادة من سرعة الأداء التي يوفرها تابع DOM الأصلي <code>querySelectorAll()</code>. للحصول أداء أفضل في المتصفحات الحديثة، استعمل <code>$("your-pure-css-selector").slice(index)</code> بدلًا من ذلك. | لمّا كان المحدد <code>:gt()</code> هو ملحق تابع لمكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإن الاستعلامات التي تستعمل <code>:gt()</code> لا يمكنها الاستفادة من سرعة الأداء التي يوفرها تابع DOM الأصلي <code>[[JavaScript/Document/querySelectorAll|querySelectorAll()]]</code>. للحصول أداء أفضل في المتصفحات الحديثة، استعمل <code>$("your-pure-css-selector").slice(index)</code> بدلًا من ذلك. | ||
=== أمثلة === | === أمثلة === | ||
المراجعة الحالية بتاريخ 14:35، 28 مايو 2018
المحدد :gt()
الوصف
يحدِّد كل العناصر التي لها فهرس (index) أكبر من المعامل index المعطى داخل المجموعة المطابقة.
jQuery(" :gt(index) ")
أُضيف مع الإصدار: 1.0.
index
فهرس صفري للعنصر المراد مطابقته.
jQuery( ":gt(-index)" )
أُضيف مع الإصدار: 1.8.
indexFromEnd
فهرس صفري، معدود تنازليًا من العنصر الأخير.
تنتقي المحددات المتعلقة بالفهرس مجموعةً من العناصر التي تطابقت مع التعابير سابقًا. إذ تقلِّص العناصر بناءً على ترتيبها في المجموعة المتطابقة. لنفترض مثلا أنه حُدِّدت أولًا العناصر الموجودة في محدد الصنف (.myclass) وأُعيدت آنذاك أربعة عناصر، فستكون فهارس هذه العناصر هي من 0 وحتى 3 من أجل أن يستعملها هذا النوع من المحددات (المحددات المتعلقة بالفهرس).
لاحظ بما أن فهارس المصفوفات في الجافاسكربت تبدأ من الصفر، فإن المحددات في jQuery تسلك ذلك السلوك أيضًا. هذا يفسر لماذا يختار المحدد عند استعماله بالشكل $('.myclass :gt(1)') العناصر التي تقع بعد العنصر الثاني المتواجدة في الصفحة وذات الصنف myclass وليس أول عنصر. لكن في المقابل، المُحدِّد :nth-child() يبدأ العدّ من الفهرس 1، وذلك كي يوافق مواصفة CSS.
لم يكن المحدد :gt() قبل jQuery 1.8 يقبل قيمة سالبة للمعامل index.
ملاحظات إضافية
لمّا كان المحدد :gt() هو ملحق تابع لمكتبة jQuery وليس جزءًا من مواصفة CSS، فإن الاستعلامات التي تستعمل :gt() لا يمكنها الاستفادة من سرعة الأداء التي يوفرها تابع DOM الأصلي querySelectorAll(). للحصول أداء أفضل في المتصفحات الحديثة، استعمل $("your-pure-css-selector").slice(index) بدلًا من ذلك.
أمثلة
جعل لون خلفية العنصر TD #5 ومابعده صفراء، وجعل لون النص للعنصر TD #8 أحمر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>gt 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:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );
</script>
</body>
</html>