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

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

这是我的HTML：

这是我的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（）？ 并且，最初让它们显示隐藏或其他东西。