How can I reduce the amount of children I use in my jQuery functions?
I feel like I have to use way too many .children()
in some of my jQuery functions.
Here's my HTML:
<div class="goal-small-container">
<div class=开发者_如何学Python"goal-content">
<div class="goal-row">
<span class="goal-actions">
And here's my 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"});
});
Is there a better way? How can I reduce the amount of children I use in my jQuery functions?
.find('.goal-content .goal-row .goal-action').whatever()
or more simply:
.find('.goal-action').whatever()
have you heard about .find()
?
$('.goal-small-container').hover(function() {
$(this).find('.goal-actions').css({visibility: "visible"});
}, function () {
$(this).find('.goal-actions').css({visibility: "hidden"});
});
Instead of
$(this).children('.goal-content').children('.goal-row').children('.goal-actions').css({visibility: "visible"});
You can use:
$(this).find('> .goal-content > .goal-row > .goal-actions').css({visibility: "visible"});
For exactly the same meaning. If there's no chance of that being ambiguous, however, (.goal-actions
will only appear in that structure of the markup) you can just use find('.goal-actions')
.
You can just use:
$('.goal-small-container').hover(function() {
$(this).find('goal-actions').show();
}, function() {
$(this).find('goal-actions').hide();
});
Why don't you just use .show() and .hide() on the second <div>
? And, initially have them display hidden or something.
精彩评论