Encontrar elemento dentro del contenedor principal con jQuery

Question

Im tratando de orientar un elemento dentro de mi LI solo estoy teniendo problemas, he leído la documentación de jQuery pero no puedo entender qué estoy haciendo mal?

En un evento de clic Quiero encontrar un elemento y alterar el código HTML dentro ...

http://jsfiddle.net/68ePW/3/

<li> 
    <h2>400</h2> 
    <form> 
     <input type='submit' class='click' value='send'>     
    </form> 
</li> 

$('.click').click(function(){ 
    $(this).parent('li').closest('h4').html('asdasd'); 
}); 

Answer 1

Basado en el código HTML siguiente (tenga en cuenta que tenía que envolver el li con la ul, ya que un regalo sin envolver li es inválida HTML):

<ul> 
    <li> 
     <h2>400</h2> 
     <form> 
      <input type='submit' class='click' value='send'>     
     </form> 
    </li>  
</ul>​​​​​​​​​​​​​​​​​​ 

Y la siguiente jQuery:

$('.click').click(function(){ 
    $(this).parent('li').closest('h4').html('asdasd'); 
}); 

Parece que está tratando de encontrar la h4 dentro del li. Los problemas que tiene son múltiples:

1. El uso de parent() solo busca el elemento principal inmediato del elemento actual; closest() utilizar en su lugar, para buscar a través de los antepasados ​​ hasta que encuentra un elemento coincidente,
2. closest() (como se mencionó) mira hacia arriba a través de los elementos antecesores, mientras que usted está tratando de encontrar un elemento entre los descendientes de la li elemento. Use find(),
3. Usted busca un elemento h4, que no existe. Necesitabas (supongo) encontrar el h2 que estaba presente en el DOM.

Así:

$('.click').click(function(){ 
    $(this).closest('li').find('h2').html('asdasd'); 
}); 

JS Fiddle demo.

Referencias:

• closest().
• find().
• parent().