الفرق بين المراجعتين لصفحة: «jQuery/eq»
Khaled-yassin (نقاش | مساهمات) |
Khaled-yassin (نقاش | مساهمات) لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.eq()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.eq()</code> في jQuery}}</noinclude> | ||
== <code>.eq( index )</code> == | == <code>.eq( index )</code> == | ||
| سطر 13: | سطر 12: | ||
==== <code>index</code> ==== | ==== <code>index</code> ==== | ||
عدد صحيح يشير إلى الموضع الصفري | عدد صحيح يشير إلى الموضع الصفري للعنصر، وهو من النوع [[JavaScript/Number|Number]]. | ||
=== <code>.eq( indexFromEnd )</code> === | === <code>.eq( indexFromEnd )</code> === | ||
| سطر 19: | سطر 18: | ||
==== <code>indexFromEnd</code> ==== | ==== <code>indexFromEnd</code> ==== | ||
عدد صحيح يشير إلى موضع العنصر، مع العد تنازليا من العنصر الأخير في | عدد صحيح يشير إلى موضع العنصر، مع العد تنازليا من العنصر الأخير في المجموعة، وهو من النوع [[JavaScript/Number|Number]]. | ||
إذا كان لدينا كائن jQuery يمثل مجموعة من عناصر DOM، فسينشئ التابع <code>.eq()</code> كائن jQuery جديد من عنصر واحد داخل هذه المجموعة. يُحدِّد الفهرس المُدخَل موضعَ هذا العنصر في المجموعة. | |||
إليك صفحة بها قائمة بسيطة:<syntaxhighlight lang="html"> | إليك صفحة بها قائمة بسيطة:<syntaxhighlight lang="html"> | ||
<ul> | <ul> | ||
<li> | <li>البند رقم 1</li> | ||
<li> | <li>البند رقم 2</li> | ||
<li> | <li>البند رقم 3</li> | ||
<li> | <li>البند رقم 4</li> | ||
<li> | <li>البند رقم 5</li> | ||
</ul> | </ul> | ||
</syntaxhighlight>يمكننا تطبيق هذا التابع على مجموعة عناصر القائمة:<syntaxhighlight lang="jquery"> | </syntaxhighlight>يمكننا تطبيق هذا التابع على مجموعة عناصر القائمة:<syntaxhighlight lang="jquery"> | ||
| سطر 44: | سطر 43: | ||
=== أمثلة === | === أمثلة === | ||
تحويل <code>[[HTML/div|<nowiki><div></nowiki>]]</code> | تحويل <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذو الفهرس 2 إلى اللون الأزرق عن طريق إضافة صنف مناسب:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>eq | <title>eq مثال على التابع</title> | ||
<style> | <style> | ||
div { | div { | ||
| سطر 81: | سطر 80: | ||
</syntaxhighlight><div> | </syntaxhighlight><div> | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/eq/ صفحة المحدد .eq() في توثيق jQuery الرسمي]. | * [http://api.jquery.com/eq/ صفحة المحدد .eq() في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Traversing]] | [[تصنيف:jQuery Traversing]] | ||
المراجعة الحالية بتاريخ 15:08، 5 يونيو 2018
.eq( index )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
تقليص مجموعة العناصر المتطابقة إلى تلك الموجودة في الفهرس المُحدَد.
.eq( index )
أُضيف مع الإصدار: 1.1.2.
index
عدد صحيح يشير إلى الموضع الصفري للعنصر، وهو من النوع Number.
.eq( indexFromEnd )
أُضيف مع الإصدار: 1.4.
indexFromEnd
عدد صحيح يشير إلى موضع العنصر، مع العد تنازليا من العنصر الأخير في المجموعة، وهو من النوع Number.
إذا كان لدينا كائن jQuery يمثل مجموعة من عناصر DOM، فسينشئ التابع .eq() كائن jQuery جديد من عنصر واحد داخل هذه المجموعة. يُحدِّد الفهرس المُدخَل موضعَ هذا العنصر في المجموعة.
إليك صفحة بها قائمة بسيطة:
<ul>
<li>البند رقم 1</li>
<li>البند رقم 2</li>
<li>البند رقم 3</li>
<li>البند رقم 4</li>
<li>البند رقم 5</li>
</ul>
يمكننا تطبيق هذا التابع على مجموعة عناصر القائمة:
$( "li" ).eq( 2 ).css( "background-color", "red" );
ينتج عن هذا الاستدعاء خلفية حمراء للعنصر 3. لاحظ أن الفهرس المُعطى صفري الأساس، ويشير إلى موضع العنصر داخل كائن jQuery، وليس داخل شجرة DOM. ويشير إدخال رقم سالب إلى موضع يبدأ من نهاية المجموعة، بدلاً من البداية. ومثال على ذلك:
$( "li" ).eq( -2 ).css( "background-color", "red" );
يتحول عنصر القائمة رقم 4 في الوقت الحالي إلى اللون الأحمر، حيث إنه الثاني من نهاية المجموعة.
إذا تعذر العثور على عنصر في الفهرس الصفري، يقوم التابع بإنشاء كائن jQuery جديد مع مجموعة فارغة وخاصية طولها length بالقيمة 0.
$( "li" ).eq( 5 ).css( "background-color", "red" );
في هذه الحالة، لا يتحول أي من عناصر القائمة إلى اللون الأحمر، حيث يشير .eq( 5 ) إلى العنصر السادس من قائمة الخمسة عناصر.
أمثلة
تحويل <div> ذو الفهرس 2 إلى اللون الأزرق عن طريق إضافة صنف مناسب:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq مثال على التابع</title>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
border: 2px solid blue;
}
.blue {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
</script>
</body>
</html>