الفرق بين المراجعتين لصفحة: «jQuery/children»

مراجعة 13:42، 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 المُعاد. ولو كنّا زودناها بهذا التعبير فستُضمَّن فقط العناصر المُطابِقة له من بين هذه العناصر الثلاث.

أمثلة

إيجاد كافّة العناصر الأبناء للعنصر عند النقر عليه:

<!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>

مصادر

صفحة التابع ‎.children()‎ في توثيق jQuery الرسمي.