JQuery: obtener el div principal de un elemento anidado ID

Question

Estoy intentando acceder a un elemento utilizando un ID de uno de sus elementos anidados, utilizando JQuery. Por ejemplo: necesito encontrar 'myDiv' desde su elemento anidado 'searchBox'. El problema es que la jerarquía cambia y el cuadro de búsqueda no siempre estará en la misma posición anidada. así que básicamente necesito algo que diga: Dame el DIV que contiene el elemento con la ID de 'searchBox'. (mira a continuación) ¿Alguna sugerencia? Gracias!

<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

Si desea encontrar el elemento de envoltura DIV (independientemente de la ID en que DIV), entonces usted querrá este selector jQuery:

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

El c losest([selector]) function se encuentra el elemento de envoltura que coincide con el selector.

Answer 2

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

Answer 3

Puede utilizar este:

var searchBox = $('#searchBox'); 

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

La documentación completa es available here.

Answer 4

Si conoce la identificación y recuerda que las identificaciones tienen que ser únicas, simplemente tome el elemento como lo haría normalmente.

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

no hay ningún beneficio del uso de .parents como las respuestas anteriores muestran ya que es sólo más lento, ya que se lleva todos los padres en la jerarquía y filtros en ellos en lugar de utilizar getElemenById. Si, por ejemplo, solo conocía className, sería mejor usar .closest('div.class') como pasos que cada uno de los padres muestra uno por uno hasta encontrar una coincidencia.

La única vez que usaría .closest es si quería asegurarse de que searchBox fuera el elemento principal de su elemento.

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

Answer 5

Puede utilizar

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

o

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

Answer 6

Complejo ejemplo anidada:

encontrar el valor de texto de un-N1 haciendo clic en un N2-!!?

Solución:

<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. ") De encontrar (" a-N1.. ").texto();