الفرق بين المراجعتين ل"jQuery/eq selector"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>‎:eq()‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude> == المحدد <code...')
 
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المحدد <code>‎:eq()‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:المحدد <code>‎:eq()‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
−
 
 
== المحدد <code>‎:eq()‎‎</code> ==
 
== المحدد <code>‎:eq()‎‎</code> ==
  
سطر 9: سطر 8:
 
أُ‎ضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].
 
أُ‎ضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].
  
−
==== <code>Index</code> ====
+
==== <code>index</code> ====
 
فهرس صفري للعنصر المراد مطابقته.
 
فهرس صفري للعنصر المراد مطابقته.
  
سطر 18: سطر 17:
 
فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا من العنصر الأخير.
 
فهرس صفري للعنصر المراد مطابقته، معدود تنازليًا من العنصر الأخير.
  
−
تقوم المحددات المرتبطة بالمؤشر ( ‎<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 لأغراض هذه المحددات.
+
تقوم المحددات المرتبطة بالفهارس ( ‎<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 تستخدم الفهرسة الصفرية، فإن هذه المحددات تعكس هذا الأمر. وهو السبب في تحديد <code>‎$( ".myclass:eq(1)" )‎</code> للعنصر الثاني في المستند مع الفئة myclass بدلاً من الأول. في المقابل، يستخدم ‎<code>[[jQuery/nth-child selector|:nth-child(n)]]</code>‎ فهرسة أحادية لتتوافق مع مواصفات CSS.
+
لاحظ أنه نظرًا لأن مصفوفات 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>[[jQuery/querySelectorAll|querySelectorAll()‎]]</code>. للحصول على أداء أفضل في المتصفحات الحديثة، استخدم ‎<code>$("your-pure-css-selector").eq(index)</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>.<syntaxhighlight lang="html">
+
العثور على ثالث عنصر <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">
 
<head>
 
<head>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
−
   <title>eq demo</title>
+
   <title>eq مثال على المحدد</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>
سطر 50: سطر 49:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>تطبيق ثلاثة أنماط مختلفة لسرد العناصر لإثبات ما ‎<code>:eq()</code>‎ مُصمم لتحديد عنصر واحد بينما ‎<code>:nth-child()</code>‎ أو ‎<code>:eq()</code>‎ داخل بنية حلقات مثل <code>[[jQuery/each|‎.each()]]</code>‎ يمكنهم تحديد عناصر متعددة.<syntaxhighlight lang="html+cheetah">
+
</syntaxhighlight>تطبيق ثلاثة أنماط مختلفة لسرد العناصر لإثبات أنَّ ‎<code>:eq()</code>‎ مُصمم لتحديد عنصر واحد، بينما التوابع ‎<code>:nth-child()</code>‎ أو ‎<code>:eq()</code>‎ داخل حلقات مثل <code>[[jQuery/each|‎.each()]]</code>‎ يمكنها تحديد عناصر متعددة:<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 demo</title>
+
   <title>eq مثال على المحدد</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>
سطر 61: سطر 60:
 
   
 
   
 
<ul class="nav">
 
<ul class="nav">
−
   <li>List 1, item 1</li>
+
   <li>القائمة 1, البند 1</li>
−
   <li>List 1, item 2</li>
+
   <li>القائمة 1, البند 2</li>
−
   <li>List 1, item 3</li>
+
   <li>القائمة 1, البند 3</li>
 
</ul>
 
</ul>
 
<ul class="nav">
 
<ul class="nav">
−
   <li>List 2, item 1</li>
+
   <li>القائمة 2, البند 1</li>
−
   <li>List 2, item 2</li>
+
   <li>القائمة 2, البند 2</li>
−
   <li>List 2, item 3</li>
+
   <li>القائمة 2, البند 3</li>
 
</ul>
 
</ul>
 
   
 
   
سطر 87: سطر 86:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>إضافة فئة إلى القائمة 2، العنصر 2 من خلال استهداف <code>[[html/li|<nowiki><li></nowiki>]]</code> الثاني إلى الأخير.<syntaxhighlight lang="html">
+
</syntaxhighlight>إضافة فئة إلى العنصر الثاني من القائمة الثانية من خلال استهداف عنصر <code>[[html/li|<nowiki><li></nowiki>]]</code> قبل الأخير:<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 demo</title>
+
   <title>eq مثال على المحدد</title>
 
   <style>
 
   <style>
 
   .foo {
 
   .foo {
سطر 104: سطر 103:
 
   
 
   
 
<ul class="nav">
 
<ul class="nav">
−
   <li>List 1, item 1</li>
+
   <li>القائمة 1, البند 1</li>
−
   <li>List 1, item 2</li>
+
   <li>القائمة 1, البند 2</li>
−
   <li>List 1, item 3</li>
+
   <li>القائمة 1, البند 3</li>
 
</ul>
 
</ul>
 
<ul class="nav">
 
<ul class="nav">
−
   <li>List 2, item 1</li>
+
   <li>القائمة 2, البند 1</li>
−
   <li>List 2, item 2</li>
+
   <li>القائمة 2, البند 2</li>
−
   <li>List 2, item 3</li>
+
   <li>القائمة 2, البند 3</li>
 
</ul>
 
</ul>
 
   
 
   
سطر 123: سطر 122:
  
 
== مصادر ==
 
== مصادر ==
−
<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 Selectors]]
 
[[تصنيف:jQuery Selectors]]

المراجعة الحالية بتاريخ 15:12، 5 يونيو 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 مثال على المحدد</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 مثال على المحدد</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul class="nav">
  <li>القائمة 1, البند 1</li>
  <li>القائمة 1, البند 2</li>
  <li>القائمة 1, البند 3</li>
</ul>
<ul class="nav">
  <li>القائمة 2, البند 1</li>
  <li>القائمة 2, البند 2</li>
  <li>القائمة 2, البند 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 مثال على المحدد</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>القائمة 1, البند 1</li>
  <li>القائمة 1, البند 2</li>
  <li>القائمة 1, البند 3</li>
</ul>
<ul class="nav">
  <li>القائمة 2, البند 1</li>
  <li>القائمة 2, البند 2</li>
  <li>القائمة 2, البند 3</li>
</ul>
 
<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
 
</body>
</html>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/eq_selector&oldid=10095"