jQuery and CSS not working properly in IE9

Question

When I have 2 instances of grid, the jquery does not pick up the second grid list, but it does for the first. Both grids also work in Opera, Chrome, Safari and Firefox..just not IE.

html:

<ul id = grid>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
</ul>

<ul id = grid>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
</ul>

css:

.hidden
{
float: left;
display: none;
width: 150px;
height: 150px
}

.something
{
float: left;
width: 150px;
height: 150px
}

jQuery:

<script src="js/jquery.js"></script>
<script>
    $(function() {
        $("#grid li").hover(
            function (e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).show();
                },
            function(e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).hide();
            }
        );
    });
</script>

score 3 · Accepted Answer · edited May 23 '17 at 12:03

First you need to make your IDs unique, here is a good resource on how to create valid IDs: What are valid values for the id attribute in HTML?. You JS needs a little work to only select the .hidden elements that are descendants of the grid you are currently hovering over and your class declarations for the .something divs need a closing quote:

html:

<ul class = "grid">
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
</ul>

<ul class = "grid">
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
</ul>

jQuery:

<script src="js/jquery.js"></script>
<script>
    $(function() {
        //using the `.children()` function will be faster than $('.grid li')
        $(".grid").children('li').hover(
            function (e) {

                //since $(this) gets used more than once its a good idea to cache it
                var $this = $(this),

                    //to get an index you can just call `.index()` in an element and it will give you that element's index with respect to its siblings
                    index = $this.index();
                $this.find(".hidden").eq(index).show();
                },
            function(e) {
                var $this = $(this),
                    index = $this.index();
                $this.find(".hidden").eq(index).hide();
            }
        );
    });
</script>

Docs for .index(): http://api.jquery.com/index

score 2 · Answer 2 · answered Dec 12 '11 at 19:19

2

ID's must be unique. Try using a class instead.

answered Dec 12 '11 at 19:19

Kevin B

94,570
16
163
180

score 2 · Answer 3 · answered Dec 12 '11 at 19:23

2

you're missing quotes after the something class. this works in IE9 and FF8 http://jsfiddle.net/2QK8u/ and your IDs must be unique

answered Dec 12 '11 at 19:23

Eonasdan

7,563
8
55
82

score 2 · Answer 4 · answered Dec 12 '11 at 19:24

id's of html elements must be unique to the page, if you're wanting to apply something to multiple elements, use classes...

There are also a few missing quotes and spacing issues.

HTML:

<ul class="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

<ul class="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

Javascript:

$(function() {
    $(".grid li").hover(
        function (e) {
            var index = $('.grid li').index(this);
            $(".hidden").eq(index).show();
            },
        function(e) {
            var index = $('.grid li').index(this);
            $(".hidden").eq(index).hide();
        }
    );
});

jQuery and CSS not working properly in IE9

4 Answers4