jQuery: ale co z wszystkimi dziećmi?

Question

Czuję, że muszę użyć zbyt wiele .children() w niektórych moich funkcji jQuery.

Tu jest mój HTML:

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

A oto mój 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"}); 
}); 

Czy istnieje lepszy sposób? Powiedz mi o dzieciach.

Answer 1

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

lub prościej:

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

Answer 2

Czy słyszałeś o .find()?

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

Answer 3

Zamiast

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

Można użyć:

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

z dokładnie tego samego znaczenia. Jeśli nie ma szans, że jest to niejednoznaczne, (.goal-actions pojawi się tylko w tej strukturze znaczników), możesz po prostu użyć find('.goal-actions').

Answer 4

Dlaczego nie można po prostu użyć .pokaż() i .hide() na drugim <div>? I, początkowo, mają one ukryty wyświetlacz lub coś takiego.

Answer 5

można po prostu użyć:

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