الفرق بين المراجعتين ل"jQuery/children"
Kinan-mawed (نقاش | مساهمات) |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 17: | سطر 17: | ||
يقبل التّابع <code>.children()</code> بشكل اختياري تعبير مُحدِّد من نفس النوع والذي يُمكِن تمريره إلى الدالة <code>$()</code>. إن زوّدنا هذه الدالة بمُحدِّد فستُرشَّح العناصر عن طريق اختبار مُطابقتها لهذا التّعبير. | يقبل التّابع <code>.children()</code> بشكل اختياري تعبير مُحدِّد من نفس النوع والذي يُمكِن تمريره إلى الدالة <code>$()</code>. إن زوّدنا هذه الدالة بمُحدِّد فستُرشَّح العناصر عن طريق اختبار مُطابقتها لهذا التّعبير. | ||
| − | فلنأخذ مثال عن صفحة تحتوي على قائمة متداخلة بسيطة: | + | فلنأخذ مثال عن صفحة تحتوي على قائمة متداخلة بسيطة:<syntaxhighlight lang="html"> |
| + | <ul class="level-1"> | ||
| + | <li class="item-i">I</li> | ||
| + | <li class="item-ii">II | ||
| + | <ul class="level-2"> | ||
| + | <li class="item-a">A</li> | ||
| + | <li class="item-b">B | ||
| + | <ul class="level-3"> | ||
| + | <li class="item-1">1</li> | ||
| + | <li class="item-2">2</li> | ||
| + | <li class="item-3">3</li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li class="item-c">C</li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li class="item-iii">III</li> | ||
| + | </ul> | ||
| + | </syntaxhighlight>إن بدأنا بالقائمة ذات المستوى الثاني (التي تمتلك الصّنف <code>level-2</code>)، فبإمكاننا إيجاد العناصر الأبناء لها عن طريق:<syntaxhighlight lang="javascript"> | ||
| + | $( "ul.level-2" ).children().css( "background-color", "red" ); | ||
| + | </syntaxhighlight>ينتج عن هذا المثال خلفيّة حمراء خلف العناصر A، و B، و C. وبما أنّنا لم نُزوِّد التابع <code>.children()</code> بتعبير مُحدِّد فستكون جميع العناصر الأبناء جزءًا من كائن jQuery المُعاد. ولو كنّا زودناها بهذا التعبير فستُضمَّن فقط العناصر المُطابِقة له من بين هذه العناصر الثلاث. | ||
مراجعة 13:16، 25 مايو 2018
.children( [selector ] )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التّابع .children() للحصول على العناصر الأبناء لكل عنصر من مجموعة العناصر المُطابِقة، ويُمكِن ترشيحه بشكل اختياري عن طريق مُحدِّد.
.children( [selector ] )
أضيفت في الإصدار: 1.0.
selector
مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة العناصر معه.
يسمح لنا التّابع .children() من خلال إعطاء كائن jQuery يُمثِّل مجموعة عناصر DOM أن نبحث خلال العناصر الأبناء لها في شجرة DOM وأن نبني كائن jQuery جديد من العناصر المُطابِقة. يختلف التّابع .children() عن التّابع .find() في أنّه يبحث خلال المستوى الأول فقط من شجرة DOM، بينما يستطيع .find() أن يبحث أيضًا في عدّة مستويات دنيا لاختيار العناصر المنحدرة عن هذا العنصر (مثل العناصر الأحفاد، إلخ..). لاحظ أنّ التّابع .children() مماثل لتوابع jQuery الأخرى في أنّها لا تُعيد أي عقدة نصيّة، وللحصول على كافّة العناصر الأبناء بما في ذلك عقد النصوص والتعليقات، فاستخدم التّابع .contents().
يقبل التّابع .children() بشكل اختياري تعبير مُحدِّد من نفس النوع والذي يُمكِن تمريره إلى الدالة $(). إن زوّدنا هذه الدالة بمُحدِّد فستُرشَّح العناصر عن طريق اختبار مُطابقتها لهذا التّعبير.
فلنأخذ مثال عن صفحة تحتوي على قائمة متداخلة بسيطة:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
إن بدأنا بالقائمة ذات المستوى الثاني (التي تمتلك الصّنف level-2)، فبإمكاننا إيجاد العناصر الأبناء لها عن طريق:
$( "ul.level-2" ).children().css( "background-color", "red" );
ينتج عن هذا المثال خلفيّة حمراء خلف العناصر A، و B، و C. وبما أنّنا لم نُزوِّد التابع .children() بتعبير مُحدِّد فستكون جميع العناصر الأبناء جزءًا من كائن jQuery المُعاد. ولو كنّا زودناها بهذا التعبير فستُضمَّن فقط العناصر المُطابِقة له من بين هذه العناصر الثلاث.