jQuery: parent()

Khóa học qua video:

parent() dùng để lấy phần tử nằm trước của phần tử hiện thời.

Theo đó, parent() sẽ chuyển đến phần tử trước của phần tử hiện thời trong cây DOM và tạo một đối tượng jQuery mới từ các phần tử phù hợp.

Phương thức này tương tự như .parents(), khác là .parent() chỉ di chuyển một cấp duy nhất lên cây DOM. Ngoài ra, phương thức $( "html" ).parent() trả về một tập hợp chứa tài liệu trong khi $( "html" ).parents() trả về một tập hợp rỗng.

Xét ví dụ một trang có danh sách lồng nhau 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 bắt đầu ở mục A, ta có thể tìm cha của nó như sau:

$("li.item-a").parent().css("background-color", "red");

Kết quả là nền đỏ cho khối thẻ <ul class="level-2>.

Ví dụ 1:

Hiển thị phần tử gốc của mỗi phần tử là (cha> con). Kiểm tra Nguồn xem để xem html thô.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <style>
  div, p {
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>

<div>div,
  <span>span, </span>
  <b>b </b>
</div>

<p>p,
  <span>span,
    <em>em </em>
  </span>
</p>

<div>div,
  <strong>strong,
    <span>span, </span>
    <em>em,
      <b>b, </b>
    </em>
  </strong>
  <b>b </b>
</div>

<script>
  $( "*", document.body ).each(function() {
    var parentTag = $( this ).parent().get( 0 ).tagName;
    $( this ).prepend( document.createTextNode( parentTag + " > " ) );
  });
</script>

</body>
</html>

Demo

Ví dụ 2

Tìm phần tử cha của mỗi đoạn có một lớp "được chọn".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<div><p>Xin chào!</p></div>
<div class="selected"><p>Và Xin chào!</p></div>

<script>
  $( "p" ).parent( ".selected" ).css( "background", "yellow" );
</script>

</body>
</html>

Demo

» Tiếp: children()

« Trước: Giữ nguyên vị trí thanh cuộn với sessionStorage

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên