JQuery - Abrufen der übergeordneten div aus einer verschachtelten Element-ID

Question

Ich versuche, auf ein Element zuzugreifen, indem ich eine ID von einem seiner verschachtelten Elemente mit JQuery verwende. Zum Beispiel: Ich muss "myDiv" von seinem verschachtelten "searchBox" Element finden. Das Problem ist, dass die Hierarchie ändert und die searchBox wird nicht immer in der gleichen verschachtelten Position sein. so brauche ich im Wesentlichen etwas, das sagt: Gib mir das DIV, das das Element mit der ID von 'searchBox' enthält.(siehe unten) Irgendwelche Vorschläge? Danke!

<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

Wenn Sie das umhüllende DIV-Element finden wollen (unabhängig von der ID auf diesem DIV), dann werden Sie diesen jQuery-Selektor benötigen:

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

Die c losest([Selektor]) Funktion findet das umhüllende Element, das dem Selektor entspricht.

Answer 2

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

Answer 3

Wenn Sie die ID kennen und sich daran erinnern, dass IDs eindeutig sein müssen, nehmen Sie einfach das Element wie Sie es normalerweise tun würden.

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

Es gibt keinen Vorteil aus der Verwendung von .parents, wie die Antworten oben zeigen, da es nur langsamer ist, da es alle Eltern in der Hierarchie und Filter auf sie, anstatt mit getElementById bekommt. Wenn Sie zum Beispiel nur den Klassennamen kennen, dann wäre es am besten, wenn Sie .closest('div.class') als das jedes Elternteil oben eine nach der anderen, bis eine Übereinstimmung gefunden wird.

Das einzige Mal, dass Sie .closest verwenden würden, wäre, wenn Sie sicherstellen wollten, dass searchBox tatsächlich ein Elternteil Ihres Elements ist.

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

Answer 4

Sie können verwenden

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

ou

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

Answer 5

Sie können dies verwenden:

var searchBox = $('#searchBox');

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

Die vollständige Dokumentation ist hier erhältlich .