second - jquery parent

¿Cómo puedo reducir la cantidad de niños que uso en mis funciones de jQuery?

Question

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

Aquí está mi HTML:

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

Y aquí está 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 alguna manera mejor? ¿Cómo puedo reducir la cantidad de niños que uso en mis funciones de jQuery?

Answer 1

¿Por qué no solo usas .show () y .hide () en el segundo <div> ? Y, inicialmente, tenerlos ocultos o algo así.

Answer 2

¿has oído 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"});

Puedes usar:

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

Para exactamente el mismo significado. Sin embargo, si no existe la posibilidad de que sea ambiguo, ( .goal-actions solo aparecerá en esa estructura de marcado), solo puede usar find(''.goal-actions'') .

Answer 4

Solo puedes usar:

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

Answer 5

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

o más simplemente:

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