jQuery: children()

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

children() dùng để lấy các phần tử con của mỗi phần tử trong tập hợp các phần tử phù hợp.

Theo đó, phương thức children() cho phép các phần tử con của các phần tử này trong cây DOM và tạo một đối tượng jQuery mới từ các phần tử phù hợp. children()khác với find() ở chỗ children() chỉ tìm phần tử con của phần tử hiện thời, trong khi .find() có thể tìm tất cả các phần tử con cháu của phần tử hiện thời. Cũng lưu ý rằng giống như hầu hết các phương thức jQuery, children() không trả về nội dung chứa trong phần tử (phần text), do vậy để lấy tất cả các nút con bao gồm cả văn bản bạn hãy sử dụng phương thức contents().

Xét ví dụ một danh sách lồng nhau cơ bản như sau:

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

Nếu ta muốn tìm con của ul có class là level-2 thì ta làm như sau:

$( "ul.level-2" ).children().css( "background-color", "red" );

Thử nghiệm

Ví dụ 1:

Tìm tất cả các phần tử con của phần tử được nhấp.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</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-3.5.0.js"></script>
</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>

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

Ví dụ 2:

Tìm tất cả các con của mỗi div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
    body {
      font-size: 16px;
      font-weight: bolder;
    }
    span {
      color: blue;
    }
    p {
      margin: 5px 0;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</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>

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

</body>
</html>

Thử nghiệm

Ví dụ 3:

Tìm tất con của phần tử <div> có class là "selected".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
    body {
      font-size: 16px;
      font-weight: bolder;
    }
    p {
      margin: 5px 0;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</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>

<script>
  $( "div" ).children( ".selected" ).css( "color", "blue" );
</script>

</body>
</html>

Thử nghiệm

» Tiếp: Cách tự động định chiều cao của iframe
« Trước: parent()
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!