jQuery duyệt - phương thức offsetParent()

Hướng dẫn duyệt jQuery

Mẫu

Đặt màu nền của phần tử tổ tiên định vị gần nhất của li có tên lớp item-a:

$('li.item-a').offsetParent().css('background-color', 'red');

Thử nghiệm ngay

Định nghĩa và cách sử dụng

offsetParent() nhận được phần tử tổ tiên định vị gần nhất.

Ngữ pháp

.offsetParent();

Giải thích chi tiết

Nếu được cung cấp một đối tượng jQuery đại diện cho tập hợp các phần tử DOM, phương thức .offsetParent() cho phép chúng ta tìm kiếm các tổ tiên của phần tử trong cây DOM và tạo ra một đối tượng jQuery bao gồm phần tử tổ tiên định vị gần nhất. Các phần tử định vị là, phần tử CSS position được đặt thành relative, absolute hoặc fixed. Thông tin này sẽ rất hữu ích khi tính toán di chuyển của hiệu ứng biểu diễn hoặc đặt đối tượng trên trang.

Hãy suy nghĩ về trang web có danh sách nhúng cơ bản và các yếu tố định vị:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">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 chúng ta bắt đầu từ mục A, chúng ta có thể tìm thấy các yếu tố tổ tiên được định vị của nó:

$('li.item-a');.offsetParent();.css('background-color', 'red');

Thử nghiệm ngay

Điều này sẽ thay đổi màu nền của mục được định vị II.

Hướng dẫn duyệt jQuery