JQuery: но как насчет всех детей?

Я чувствую, что мне приходится использовать слишком много .children() в некоторых моих функциях jQuery.

Здесь мой HTML:

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

И вот мой 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"});
});

Есть ли лучший способ? Расскажите мне о детях.

Ответ 1

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

или более просто:

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

Ответ 2

Вы слышали о .find()?

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

Ответ 3

Вместо

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

Вы можете использовать:

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

Точно такое же значение. Однако, если у вас нет возможности быть двусмысленным (.goal-actions будет отображаться только в этой структуре разметки), вы можете просто использовать find('.goal-actions').

Ответ 4

Вы можете просто использовать:

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

Ответ 5

Почему бы вам просто не использовать .show() и .hide() во втором <div>? И сначала они отображают скрытые или что-то.