如何减少 jQuery 函数中使用的子级数量？

Question

我觉得我必须在一些 jQuery 函数中使用太多的 .children() 。

这是我的 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')< /代码>。

Answer 4

你可以只使用：

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

Answer 5

为什么不在第二个

上使用 .show() 和 .hide() ？并且，最初让它们显示隐藏或其他东西。