الفرق بين المراجعتين لصفحة: «jQuery/eq selector»
< jQuery
Khaled-yassin (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>:eq()</code> في jQuery}}</noinclude> == المحدد <code...' |
لا ملخص تعديل |
||
| سطر 9: | سطر 9: | ||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | ||
==== <code> | ==== <code>index</code> ==== | ||
فهرس صفري للعنصر المراد مطابقته. | فهرس صفري للعنصر المراد مطابقته. | ||
| سطر 18: | سطر 18: | ||
فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا من العنصر الأخير. | فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا من العنصر الأخير. | ||
تقوم المحددات المرتبطة | تقوم المحددات المرتبطة بالفهارس ( <code>:eq()</code> و <code>[[jQuery/lt selector|:lt()]]</code> و <code>[[jQuery/gt selector|:gt()]]</code> و <code>[[jQuery/even selector|:even]]</code> و <code>[[jQuery/odd selector|:odd]]</code> ) بترشيح مجموعة العناصر التي طابقت التعبيرات التي تسبقها. وهي تُضيِّق المجموعة على أساس ترتيب العناصر داخل هذه المجموعة المتطابقة. على سبيل المثال، إذا حُدِدت العناصر أولاً باستخدام مُحدد فئة ( <code>.myclass</code> ) وأُعيدت أربعة عناصر، يتم إعطاء هذه العناصر الفهارس من 0 إلى 3 لأغراض هذه المحددات. | ||
لاحظ أنه نظرًا لأن مصفوفات JavaScript تستخدم الفهرسة الصفرية، فإن هذه المحددات | لاحظ أنه نظرًا لأن مصفوفات JavaScript تستخدم الفهرسة الصفرية، فإن هذه المحددات تفعل الأمر نفسه. وهو السبب في تحديد <code>$( ".myclass:eq(1)" )</code> للعنصر الثاني في المستند مع الفئة <code>myclass</code> بدلاً من الأول. في المقابل، يستخدم <code>[[jQuery/nth-child selector|:nth-child(n)]]</code> فهرسة أحادية لتتوافق مع مواصفات CSS. | ||
قبل الإصدار jQuery 1.8، لم يكن المحدد <code>[[jQuery/eq|:eq(index)]]</code> يقبل قيمة سالبة للفهرس index (على الرغم من التابع <code>[[jQuery/eq|.eq(index)]]</code> يقبلها). | قبل الإصدار jQuery 1.8، لم يكن المحدد <code>[[jQuery/eq|:eq(index)]]</code> يقبل قيمة سالبة للفهرس index (على الرغم من التابع <code>[[jQuery/eq|.eq(index)]]</code> يقبلها). | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
لأن <code>:eq()</code> هو ملحق jQuery وليس جزءًا من مواصفات CSS، فلا يمكن استفادة الاستعلامات باستخدام <code>:eq()</code> من تحسين الأداء الذي يوفره تابع DOM الأصلي <code>[[ | لأن <code>:eq()</code> هو ملحق تابع لمكتبة jQuery وليس جزءًا من مواصفات CSS، فلا يمكن استفادة الاستعلامات باستخدام <code>:eq()</code> من تحسين الأداء الذي يوفره تابع DOM الأصلي <code>[[JavaScript/Document/querySelectorAll|querySelectorAll()]]</code>. للحصول على أداء أفضل في المتصفحات الحديثة، استخدم <code>$("your-pure-css-selector").eq(index)</code> بدلاً من ذلك. | ||
=== أمثلة === | === أمثلة === | ||
العثور على ثالث <code>[[HTML/td|<nowiki><td></nowiki>]]</code> | العثور على ثالث عنصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> في الجدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 50: | سطر 50: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تطبيق ثلاثة أنماط مختلفة لسرد العناصر لإثبات | </syntaxhighlight>تطبيق ثلاثة أنماط مختلفة لسرد العناصر لإثبات أنَّ <code>:eq()</code> مُصمم لتحديد عنصر واحد، بينما التوابع <code>:nth-child()</code> أو <code>:eq()</code> داخل حلقات مثل <code>[[jQuery/each|.each()]]</code> يمكنها تحديد عناصر متعددة:<syntaxhighlight lang="html+cheetah"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 87: | سطر 87: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>إضافة فئة إلى القائمة | </syntaxhighlight>إضافة فئة إلى العنصر الثاني من القائمة الثانية من خلال استهداف عنصر <code>[[html/li|<nowiki><li></nowiki>]]</code> قبل الأخير:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 123: | سطر 123: | ||
== مصادر == | == مصادر == | ||
<span> </span>[http://api.jquery.com/eq-selector/ صفحة المحدد :eq() في توثيق jQuery الرسمي]. | * <span> </span>[http://api.jquery.com/eq-selector/ صفحة المحدد :eq() في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Selectors]] | [[تصنيف:jQuery Selectors]] | ||
مراجعة 08:46، 17 مايو 2018
المحدد :eq()
الوصف
يُحدد العنصر الموجود في الفهرس n داخل المجموعة المتطابقة.
jQuery( ":eq(index)" )
أُضيف مع الإصدار: 1.0.
index
فهرس صفري للعنصر المراد مطابقته.
jQuery( ":eq(-index)" )
أُضيف مع الإصدار: 1.8.
indexFromEnd
فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا من العنصر الأخير.
تقوم المحددات المرتبطة بالفهارس ( :eq() و :lt() و :gt() و :even و :odd ) بترشيح مجموعة العناصر التي طابقت التعبيرات التي تسبقها. وهي تُضيِّق المجموعة على أساس ترتيب العناصر داخل هذه المجموعة المتطابقة. على سبيل المثال، إذا حُدِدت العناصر أولاً باستخدام مُحدد فئة ( .myclass ) وأُعيدت أربعة عناصر، يتم إعطاء هذه العناصر الفهارس من 0 إلى 3 لأغراض هذه المحددات.
لاحظ أنه نظرًا لأن مصفوفات JavaScript تستخدم الفهرسة الصفرية، فإن هذه المحددات تفعل الأمر نفسه. وهو السبب في تحديد $( ".myclass:eq(1)" ) للعنصر الثاني في المستند مع الفئة myclass بدلاً من الأول. في المقابل، يستخدم :nth-child(n) فهرسة أحادية لتتوافق مع مواصفات CSS.
قبل الإصدار jQuery 1.8، لم يكن المحدد :eq(index) يقبل قيمة سالبة للفهرس index (على الرغم من التابع .eq(index) يقبلها).
ملاحظات إضافية
لأن :eq() هو ملحق تابع لمكتبة jQuery وليس جزءًا من مواصفات CSS، فلا يمكن استفادة الاستعلامات باستخدام :eq() من تحسين الأداء الذي يوفره تابع DOM الأصلي querySelectorAll(). للحصول على أداء أفضل في المتصفحات الحديثة، استخدم $("your-pure-css-selector").eq(index) بدلاً من ذلك.
أمثلة
العثور على ثالث عنصر <td> في الجدول <table>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq 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:eq( 2 )" ).css( "color", "red" );
</script>
</body>
</html>
تطبيق ثلاثة أنماط مختلفة لسرد العناصر لإثبات أنَّ :eq() مُصمم لتحديد عنصر واحد، بينما التوابع :nth-child() أو :eq() داخل حلقات مثل .each() يمكنها تحديد عناصر متعددة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
// تطبيق لون الخلفية الصفراء على <li> واحدة فقط
$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
// تطبيق الخط المائل على نص <li> الثاني داخل كل <ul class = "nav">
$( "ul.nav" ).each(function( index ) {
$( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
});
// تطبيق لون النص الأحمر على سليلات <ul class = "nav">
// لكل <li> يكون الابن الثاني من أصله
$( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>
</body>
</html>
إضافة فئة إلى العنصر الثاني من القائمة الثانية من خلال استهداف عنصر <li> قبل الأخير:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<style>
.foo {
color: blue;
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
</body>
</html>