children()

.children( [ selector ])

מחזירה: jQuery

תיאור: מחזיר ילדים של כל אלמנט בקבוצת אלמנטים בהתאמה, מסוננים אופציונלית על ידי סלקטור.

.children( [ selector ] )

הוספה בגרסה: 1.0

selector

מחרוזת, המכילה ביטוי לבחירת אלמנטים בהתאמה.

בהינתן אובייקט jQuery, המייצג קבוצה של אלמנטים DOM, שיטה .children() מאפשרת לנו לחפש בילדים המיידים של אלמנטים האלה בעץ DOM ולבנות אובייקט חדש של jQuery מאלמנטים המתאימים. שיטות .find() ו- .children() דומות, פרט לזה ששיטה אחרונה בוחנת רק רמה אחד מטה בעץ DOM.

שיטה מקבלת אופציאונלית ביטוי של סלקטור מאותו סוג, שאנחנו יכולים לשלוח לפונקציה $(). אם סלקטור נשלח, אלמנטים יסוננו לבדיקת התאמה.

נתבונן על דף עם רשימה מקוננת פשוטה:

<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. מכיוון שלא ספקנו ביטוי של סלקטור, כל הילדים יהיו חלק מאובייקט המוחזר של jQuery. אם הינו מספקים ביטוי של סלקטור, רק אלמנטים בהתאמה משלושת האלמנטים האלה היו נבחרים.

דוגמאות

דוגמה 1

מחפש כל הבנים של אלמנט שנלחץ.

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

  });
  </script>

  <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 { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
</head>
<body>
  <div id="container">
    <div>

      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>

    </p>
  </div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מחפש כל הבנים של אלמנטים מסוג div.

$("div").children().css("border-bottom", "3px double red");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("div").children().css("border-bottom", "3px double red");
  });
  </script>

  <style>
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  </style>

</head>
<body>
  <p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מחפש כל צאצאים עם class «selected» של כל אלמנט מסוג div.

$("div").children(".selected").css("color", "blue");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 3 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("div").children(".selected").css("color", "blue");
  });
  </script>

  <style>
  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  </style>

</head>
<body>
  <div>
    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>

</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

children()

.children( [ selector ])

.children( [ selector ] )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

דוגמה 3

דוגמה 3 - קוד מלא:

תגובות