التابع .children() في jQuery
.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 المُعاد. ولو كنّا زودناها بهذا التعبير فستُضمَّن فقط العناصر المُطابِقة له من بين هذه العناصر الثلاث.
أمثلة
إيجاد كافّة العناصر الأبناء للعنصر عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>children مثال عن التابع</title>
<style>
body {
font-size: 16px;
font-weight: bolder;
}
div {
width: 130px;
height: 82px;
margin: 10px;
float: left;
border: 1px solid blue;
padding: 4px;
}
#container {
width: auto;
height: 105px;
margin: 0;
float: none;
border: none;
}
.hilite {
border-color: red;
}
#results {
display: block;
color: red;
}
p, span, em, a, b, button {
border: 1px solid transparent;
}
p {
margin: 10px;
}
span {
color: blue;
}
input {
width: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="container">
<div>
<p>هذه <span>هي <em>الطريقة</em> التي</span>
نكتب <em>بها</em> المثال,</p>
</div>
<div>
<a href="#"><b>ا</b>كت<b>ب</b></a> الـ <span>مثال,</span> <button>اكتب
الـ</button> مثال,
</div>
<div>
هذه <span>هي الطريقة التي <em>نكتب</em> بها <em>المثال</em> </span>
<input type="text" value="early"> في
</div>
<p>
<span>ا</span>لـ <span>صـ</span>باح.
<span id="results">توجد <span>0</span> عناصر أبناء في <span>العنصر</span>.</span>
</p>
</div>
<script>
$( "#container" ).click(function ( event ) {
$( "*" ).removeClass( "hilite" );
var kids = $( event.target ).children();
var len = kids.addClass( "hilite" ).length;
$( "#results span:first" ).text( len );
$( "#results span:last" ).text( event.target.tagName );
event.preventDefault();
});
</script>
</body>
</html>
إيجاد كافّة العناصر الأبناء لكل عنصر <div>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>children مثال عن التّابع</title>
<style>
body {
font-size: 16px;
font-weight: bolder;
}
span {
color: blue;
}
p {
margin: 5px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>مرحبًا (هذه فقرة)</p>
<div><span>مرحبًا (عنصر span هذا هو عنصر ابن للعنصر div)</span></div>
<p>و <span>مرة أخرى</span> في فقرة ثانية</p>
<div>ومرة <span>أخيرة</span> (معظم النص مباشرةً في عنصر div)</div>
<script>
$( "div" ).children().css( "border-bottom", "3px double red" );
</script>
</body>
</html>
إيجاد كافّة العناصر الأبناء التي تمتلك الصنف selected لكل عنصر <div>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>children مثال عن التابع</title>
<style>
body {
font-size: 16px;
font-weight: bolder;
}
p {
margin: 5px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<span>مرحبًا</span>
<p class="selected">مرحبًا مرة أخرى</p>
<div class="selected">ومرة أخرى</div>
<p>ومرة أخيرة</p>
</div>
<script>
$( "div" ).children( ".selected" ).css( "color", "blue" );
</script>
</body>
</html>