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

<div id="navigation">
    <ul id="navList">
        <li class="navItem"><a href=".html">Discover</a></li>
        <li class="navItem"><a href=".html">Documentation</a></li>
        <li class="navItem"><a href=".html">Download</a></li>
        <li class="navItem"><a href=".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>

/

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

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./placeholderRX.html">Discover</a></li>
        <li class="navItem"><a href="http://www.jacobsmits./placeholderRX/documentation.html">Documentation</a></li>
        <li class="navItem"><a href="http://www.jacobsmits./placeholderRX/download.html">Download</a></li>
        <li class="navItem"><a href="http://www.jacobsmits./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/Sth3Z/

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

• javascript
• jquery

• stackoverflow./questions/341723/… , stackoverflow./questions/6978911/… , stackoverflow./questions/5555464/javascript-closure-of-loop – 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 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 Commented Dec 10, 2011 at 23:36
• @lwburk Just for you: stackoverflow./questions/1956698/… – user166390 Commented Dec 10, 2011 at 23:42

3 Answers 3

Add var before $link: http://jsfiddle/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.

why not

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

?

http://jsfiddle/Sth3Z/2/

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');
    }
);