jQuery: ma per quanto riguarda tutti i bambini?

Question

Mi sembra di dover usare troppe funzioni .children() in alcune delle mie funzioni jQuery.

Ecco il mio HTML:

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

Ed ecco la mia 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"}); 
}); 

C'è un modo migliore? Dimmi per i bambini.

Answer 1

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

o più semplicemente:

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

Answer 2

hai sentito parlare di .find()?

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

Answer 3

Invece di

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

È possibile utilizzare:

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

Per esattamente lo stesso significato. Se non c'è alcuna possibilità che ciò sia ambiguo, tuttavia, (.goal-actions apparirà solo in quella struttura del markup) puoi semplicemente usare find('.goal-actions').

Answer 4

Perché non basta usare .Show() e .nascosto() sulla seconda <div>? E, inizialmente li mostri nascosti o qualcosa del genere.

Answer 5

Si può semplicemente utilizzare:

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