JQuery - ottenere il genitore div da un elemento nidificato ID

Question

sto provando ad accedere ad un elemento usando un ID di uno dei suoi elementi nidificati, usando JQuery. Ad esempio: ho bisogno di trovare "myDiv" dal suo elemento nidificato "searchBox". Il problema è che la gerarchia cambia e il searchBox non sarà sempre nella stessa posizione nidificata. quindi ho essenzialmente bisogno di qualcosa che dice: Dammi il DIV che contiene l'elemento con l'ID di 'searchBox'. (vedi sotto) Qualche suggerimento? Grazie!

<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

Se si vuole trovare l'elemento involucro DIV (indipendentemente dal ID su quel DIV) allora ti consigliamo questo selettore jQuery:

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

Il c losest([selector]) function troveranno l'elemento involucro che corrisponde al selettore.

Answer 2

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

Answer 3

È possibile utilizzare questo:

var searchBox = $('#searchBox'); 

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

La documentazione completa è available here.

Answer 4

Se si conosce l'ID e ricordare che l'ID deve essere univoco, basta prendere l'elemento come faresti normalmente.

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

non c'è alcun beneficio dall'uso .parents come le risposte di cui sopra mostrano quanto è solo più lento, come si arriva tutti i genitori della gerarchia e filtri su di loro piuttosto che utilizzare getElementById. Se, ad esempio, conoscessi solo il nome classe, sarebbe meglio utilizzare .closest('div.class') in modo che i passaggi di ciascun genitore sopra uno per uno fino a quando non viene trovata una corrispondenza.

L'unica volta che si utilizza .closest è se si desidera assicurarsi che searchBox fosse effettivamente un genitore del proprio elemento.

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

Answer 5

È possibile utilizzare

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

o

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

Answer 6

Complesso esempio nidificato:

trovare il valore di testo di un-N1 facendo clic su un-N2 !!?

Soluzione:

<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. ") Trovare (" un-N1.. ").testo();