Phương thức .parents() trong jQuery có chức năng xác định thành phần tổ tiên cho một phần tử HTML nào đó. Bằng cách đi ngược lên cây DOM. Nó có thể kết hợp cả với bộ chọn (Selector).

Parents() jQuery khi học bạn sẽ thấy nó gần giống với Closest. Tuy nhiên trước khi phân biệt được bạn cần tìm hiểu về nó trước đã.

Cú pháp:

// .parents()

$('li').parents();

// .parents("bộ chọn")

$('li').parents(".parent");

Phương thức .parents() trong jQuery

Thực hành ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $("span").parents().css({"color": "red", "border": "5px solid red"});
});
</script>
</head>

<body class="ancestors">body (ông cố)
  <div style="width:500px;">div (ông bà cố)
    <ul>ul (ông bà)  
      <li>li (cha mẹ trực tiếp)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

parents-jquery

Phương thức .parents(“Bộ chọn”)

Thay đoạn mã bằng

$("span").parents("ul").css({"color": "red", "border": "5px solid red"}); });

parents-jquery-selector

Sự khác biệt giữa parents() với Closest()

Về cơ bản closest bắt đầu đối sánh phần tử từ phần tử hiện tại.

Trong khi parents bắt đầu so khớp các phần tử từ phần tử gốc (một cấp trên phần tử hiện tại)

Kết luận: Bài viết này bạn đã được tìm hiểu về parent jQuery và các ví dụ cụ thể. Bên cạnh đó cũng được so sánh với Closet.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *