JQuery - lấy div cha từ một mã phần tử lồng nhau ID

Question

tôi đang cố gắng truy cập một phần tử bằng cách sử dụng một ID của một trong các thành phần lồng nhau của nó, bằng cách sử dụng JQuery. Ví dụ: tôi cần phải tìm 'myDiv' từ phần tử 'searchBox' lồng nhau của nó. Vấn đề là thứ bậc thay đổi và hộp tìm kiếm sẽ không phải lúc nào cũng ở cùng một vị trí lồng nhau. vì vậy tôi về cơ bản cần một cái gì đó mà nói: Hãy cho tôi DIV có chứa các yếu tố với ID của 'searchBox'. (xem bên dưới) Bất cứ đề nghị? Cảm ơn!

<div id="myDiv" class="CommonGridView_ListBoxPopupPanel"> 
Some text here : 
<table><tbody><tr><td><input class="tboxw" type="text" id="btnFind"/></td> 
<td>some content</td> </tr> 
<tr> <td><textarea id="searchBox">text area content</textarea> </td> 
</tr> 
</tbody> 
</table> 
<table><tr><td></td></tr></table> 
</div> 

Answer 1

Nếu bạn muốn tìm các yếu tố gói DIV (không phụ thuộc vào ID trên DIV đó) sau đó bạn sẽ muốn chọn jQuery này:

$("#searchBox").closest("div"); 

Các c losest([selector]) function sẽ tìm thấy những yếu tố gói đó khớp với công cụ chọn.

Answer 2

$('#searchBox').parents('#myDiv') 

Answer 3

Bạn có thể sử dụng này:

var searchBox = $('#searchBox'); 

// Have the searchBox jQuery object, so find the ancestors that match a specific selector. 
var parentDiv = searchBox.parents('div#myDiv'); 

Các tài liệu đầy đủ là available here.

Answer 4

Nếu bạn biết id và id ghi nhớ phải là duy nhất, chỉ cần lấy phần tử như bình thường.

var $parentDiv = $('#searchBox'); 

Không có lợi ích từ việc sử dụng .parents như các câu trả lời trên chương trình vì nó chỉ là chậm như nó được tất cả các phụ huynh trong hệ thống phân cấp và các bộ lọc này thay vì sử dụng getElementById. Nếu ví dụ bạn chỉ biết className thì tốt nhất bạn nên sử dụng .closest('div.class') vì các bước đó mỗi bậc cha mẹ ở trên từng cái một cho đến khi tìm thấy kết quả phù hợp.

Lần duy nhất bạn sẽ sử dụng .closest là nếu bạn muốn đảm bảo rằng searchBox thực sự là phụ huynh của phần tử của bạn.

if ($element.closest('#searchBox').length){ 
    //do something 
} 

Answer 5

Bạn có thể sử dụng

$('#searchBox').parents('div:first') 

hoặc

$('#searchBox').parents('div:eq(0)') 

Answer 6

Complex dụ lồng nhau:

tìm giá trị văn bản của một-N1 bằng cách nhấp vào một-N2 !!?

Giải pháp:

<ul class="ul-N1"> 
     <li class="li-N1"> 
      <a class="a-N1"></a> 
      <ul class="ul-N2"> 
       <li class="li-N2"> 
        <a class="a-N2"> </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 

Jquery:

var a-N1 = $ (this) .closest (" ul-N1 .li-N1. ") Tìm (" một-N1.. ").bản văn();