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

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