如何减少我在jQuery函数中使用的子项数量？

Question

我觉得我必须.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"});
});

有没有更好的办法？如何减少我在jQuery函数中使用的子项数量？

Answer 1

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

或更简单地说:

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

Answer 2

你听说过.find()吗？

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

Answer 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').