padres vs cercano

Question

¿Por qué este trabajo:

$('.button_30').click(function(){ 
    $(this).closest('.portlet').find('.portlet_content').text("foo"); 
});​ 

ninguna razón por qué no funciona:

$('.button_30').click(function(){ 
    $(this).parent('.portlet').find('.portlet_content').text("foo"); 
});​ 

donde el HTML se ve algo como esto:

<div class="portlet portlet_30"> 

    <div class="portlet_header portlet_header_30"> 
     header content here 
    </div> 

    <div class="portlet_sub_header portlet_sub_header_30"> 
     <input type="text" class="textbox_30" /> 
    </div> 

    <div class="portlet_content portlet_content_30"> 
     results go here 
    </div> 

    <div class="portlet_footer portlet_footer_30"> 
     <input type="button" class="button_30" /> 
    </div> 

</div> 

<div class="portlet portlet_30"> 

    <div class="portlet_header portlet_header_30"> 
     header content here 
    </div> 

    <div class="portlet_sub_header portlet_sub_header_30"> 
     <input type="text" class="textbox_30 /> 
    </div> 

    <div class="portlet_content portlet_content_30"> 
     results go here 
    </div> 

    <div class="portlet_footer portlet_footer_30"> 
     <input type="button" class="button_30" /> 
    </div> 

</div> 

Answer 1

Debido parent() se devuelve el padre (antecesor inmediato) solo si coincide con el nombre ctor especificado.

Sin embargo, closest() buscará todos antepasados ​​y devolver el primera que coincide con el selector.

Como padre de button_30 es una div, cuyo padre es el div con la clase de portlet, la función parent() no coincide con él y devolver un conjunto vacío, donde -como closest()es emparejándola.

---

Para completar el conjunto de métodos similares aquí se tiene parents(), que es como closest()pero doesnt parada en el primer elemento coincidente; devuelve todos los antepasados ​​que coinciden con el selector.

Answer 2

• .parent() sólo se ve en el antepasado inmediato.

• .closest() examina todos los antecesores, así como el elemento de origen, y devuelve la primera coincidencia.

• .parents() examina todos los antecesores y devuelve todas las coincidencias.

Answer 3

parent() sólo se ve en un nivel superior, puede intentar parents() para buscar todas las camino hasta

$('.button_30').click(function(){ 
    $(this).parents('.portlet').find('.portlet_content').text("foo"); 
});​ 

se puede ver la documentation

Answer 4

Debido a que los únicos elementos que coinciden con .portlet son abuelos , no los padres de los elementos en los que está vinculado el evento

Answer 5

El closest^{[API Ref]} método atraviesa el árbol antecesor todo lo que necesita para encontrar una coincidencia de selector.

El método parent^{[API Ref]} sólo se ve en la matriz directa.

Answer 6

El método parent comprueba solo un nivel en la cadena de elementos, mientras que closest seguirá revisando la lista de padres hasta que se encuentre una coincidencia (o se haya alcanzado la etiqueta html). El equivalente es:

$('.button_30').click(function(){ 
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo"); 
});​ 

Answer 7

Debido a que en el segundo selector que está buscando el Padre y esta función el movimiento de al DOM al nodo padre pero sólo one level que contiene las clases portlet_footer portlet_footer_30 no las clases que eres pasando al selector .portlet para trabajar con parent debe mover dos niveles en otras palabras.

each time that you're using parent you move one node up