jQuery: pero ¿y todos los niños?

Question

Siento que tengo que usar demasiados .children() en algunas de mis funciones de jQuery.

Aquí es mi HTML:

<div class="goal-small-container"> 
    <div class="goal-content"> 
    <div class="goal-row"> 
     <span class="goal-actions"> 

Y aquí es mi jQuery:

$('.goal-small-container').hover(function() { 
    $(this).children('.goal-content').children('.goal-row').children('.goal-actions').css({visibility: "visible"}); 
}, function() { 
    $(this).children('.goal-content').children('.goal-row').children('.goal-actions').css({visibility: "hidden"}); 
}); 

¿Hay una mejor manera? Dime por los niños.

Answer 1

.find('.goal-content .goal-row .goal-action').whatever() 

o más simplemente:

.find('.goal-action').whatever() 

Answer 2

¿Oyes hablar de .find()?

$('.goal-small-container').hover(function() { 
    $(this).find('.goal-actions').css({visibility: "visible"}); 
}, function() { 
    $(this).find('.goal-actions').css({visibility: "hidden"}); 
}); 

Answer 3

En lugar de

$(this).children('.goal-content').children('.goal-row').children('.goal-actions').css({visibility: "visible"}); 

Se puede utilizar:

$(this).find('> .goal-content > .goal-row > .goal-actions').css({visibility: "visible"}); 

para exactamente el mismo significado. Sin embargo, si no hay ninguna posibilidad de que sea ambiguo, (.goal-actions solo aparecerá en esa estructura del marcado) simplemente puede usar find('.goal-actions').

Answer 4

¿Por qué no sólo tiene que utilizar .show() y .hide() en el segundo <div>? E, inicialmente, haz que se muestren ocultos o algo así.

Answer 5

sólo puede utilizar:

$('.goal-small-container').hover(function() { 
    $(this).find('goal-actions').show(); 
}, function() { 
    $(this).find('goal-actions').hide(); 
});