Làm cách nào để kiểm tra xem một phần tử có nằm trong một phần tử khác trong jQuery không?

Question

Có cách nào trực tiếp trong JavaScript hoặc jQuery để kiểm tra xem một phần tử có nằm trong một phần tử khác hay không.

Tôi không đề cập đến số $(this).parent vì yếu tố tôi muốn tìm có thể là các bước số ngẫu nhiên thấp hơn trong cây phần tử.

Như một ví dụ, tôi muốn kiểm tra xem < div id="THIS DIV"> sẽ nằm trong < div id="THIS PARENT">:

<div id="THIS_PARENT"> 
<div id="random"> 
    <div id="random"> 
    <div id="random"> 
    <div id="THIS_DIV"> 
(... close all divs ...) 

Vì vậy, trong mã giả:

if($("div#THIS_DIV").isWithin("div#THIS_PARENT")) ... 

Nếu không có bất kỳ cách nào trực tiếp tôi sẽ có thể làm một chức năng cho việc này nhưng vẫn đáng để hỏi.

Answer 1

Bạn có thể làm điều này:

if($('#THIS_DIV','#THIS_PARENT').length == 1) { 

} 

By specifying a context cho việc tìm kiếm (đối số thứ hai), chúng tôi về cơ bản nói "tìm kiếm một phần tử với một ID của #THIS_DIV trong một phần tử với ID của #THIS_PARENT". Đây là cách tốt nhất để làm điều đó bằng cách sử dụng jQuery.

Chúng tôi cũng có thể viết nó như thế này, sử dụng find, nếu nó có ý nghĩa hơn đối với bạn:

if($('#THIS_PARENT').find('#THIS_DIV').length == 1) { 

} 

Hoặc như thế này, sử dụng parents, nếu bạn muốn tìm kiếm từ các con trở lên:

if($('#THIS_DIV').parents('#THIS_PARENT').length == 1) { 

}  

Bất kỳ điều nào trong số này đều hoạt động tốt. Các bit length là cần thiết để đảm bảo độ dài của "tìm kiếm" là> 0. Tôi tất nhiên cá nhân khuyên bạn nên đi với một trong những đầu tiên vì nó là đơn giản nhất.

Ngoài ra, nếu bạn đang đề cập đến một phần tử theo ID thì không cần thiết (mặc dù tất nhiên là không sao) để bắt đầu bộ chọn với tên thẻ. Theo như tốc độ, mặc dù, nó không thực sự giúp đỡ như jQuery là sẽ sử dụng bản địa getElementById() nội bộ. Sử dụng tên thẻ chỉ quan trọng khi chọn theo lớp, vì div.myclass nhanh hơn nhiều so với .myclass nếu chỉ <div> yếu tố sẽ có lớp cụ thể.

Answer 2

Với jQuery> = 1.4 (2010), bạn có thể sử dụng chức năng rất nhanh jQuery.contains()

phương pháp tĩnh này hoạt động với các yếu tố DOM, không có yếu tố jQuery và trả true hoặc false.

jQuery.contains(container, descendant) 

Ví dụ: Để kiểm tra xem một phần tử trong tài liệu bạn có thể làm điều này:

jQuery.contains(document.body, myElement)