Question

Should I use $button.eq(number_of_active_slide) or $button in the example below?

The height of all buttons are 10px except for one which has the index of different_value.

In Option A I will be able to cache the selectors in a variable, which seems good to me. But I will animate all the selectors (most of them will already have a height of 10px). So it seems unnecessary.

In Option B I will not be able to cache the selectors in a variable (it will be a different value every time it is clicked). But I will online animate a single selector which also seems god to me.

Example:

// Option A:
$button.click(function () {

    $button.animate({
        height: '10px'
    }, 500);

});

// Option B:
$button.click(function () {

    $button.eq(different_value).animate({
        height: '10px'
    }, 500);

});

Answer 1

I would use this:

$button.click(function () {

    $(this).animate({
        height: '10px'
    }, 500);

});

I am assuming that the button you click is the one you want to animate.

If this is not the case, .eq() is a super-fast operation. You are still caching the set of buttons, which is the expensive searching step. Using .eq() to reduce the set is not bad. I would use option B in that case.