Jquery each(): variable in callback always has last value?

Question

Can't seem to figure out what's going on here.

<div id="navigation">
    <ul id="navList">
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX.html">Discover</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/documentation.html">Documentation</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/download.html">Download</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/donate.html">Donate</a></li>
    </ul>
    <script type="text/javascript">
        $('.navItem').each(function() {
            $link = $(this).children('a');
            $link.hover(
                function() {
                    $link.css('width', '224px');
                },
                function() {
                    $link.css('width', '192px');
                }
            )
        });            
    </script>
</div>

http://jsfiddle.net/Sth3Z/

It should be doing it for each link, instead it only changes the last link no matter which one is being hovered over.

stackoverflow.com/questions/341723/… , stackoverflow.com/questions/6978911/… , stackoverflow.com/questions/5555464/javascript-closure-of-loop — user166390
– user166390, Commented Dec 10, 2011 at 23:32
@pst - That is not the issue here. Did you read Rob's answer or run his fiddle? — Wayne
– Wayne, Commented Dec 10, 2011 at 23:33
@pst - Clearly the OP intended the $link to be a local var. And clearly Rob answered correctly. — Wayne
– Wayne, Commented Dec 10, 2011 at 23:36
@lwburk Just for you: stackoverflow.com/questions/1956698/… — user166390
– user166390, Commented Dec 10, 2011 at 23:42

Rob W · Accepted Answer · 2011-12-10 23:22:17Z

12

Add var before $link: http://jsfiddle.net/Sth3Z/1/

    $('.navItem').each(function() {
        var $link = $(this).children('a');   // `var` added

Currently, you're declaring a global variable, which will be overwritten at each iteration in the loop.

answered Dec 10, 2011 at 23:22

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Throttlehead Over a year ago

Doh! Thanks so much. My minds been blanking all day lol. Also probably has something to do with all the PHP I've been doing lately. Damn varying variable scopes!

Roman · Accepted Answer · 2011-12-10 23:29:41Z

4

why not

$('.navItem > a').hover(
    function() {
        $(this).css('width', '224px');
    },
    function() {
        $(this).css('width', '192px');
    }
);

?

http://jsfiddle.net/Sth3Z/2/

answered Dec 10, 2011 at 23:29

Roman

6,5582 gold badges32 silver badges51 bronze badges

Comments

jonagoldman · Accepted Answer · 2011-12-10 23:31:33Z

3

There is a better way of writing what u are trying to do:

$(".navItem a").hover(
    function() {
        $(this).css('width', '224px');
    },
    function() {
        $(this).css('width', '192px');
    }
);

answered Dec 10, 2011 at 23:31

jonagoldman

8,77221 gold badges74 silver badges104 bronze badges

Collectives™ on Stack Overflow

Jquery each(): variable in callback always has last value?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related