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

Share Improve this question Follow edited Dec 10, 2011 at 23:30 user166390 asked Dec 10, 2011 at 23:20 ThrottleheadThrottlehead 1,94566 gold badges2222 silver badges3737 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 12

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