JQuery and CSS not working properly in IE9

Question

When I have 2 grid instances, jquery does not display the second grid list, but it does it for the first. Both grids also work in Opera, Chrome, Safari and Firefox. This is 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> 

Answer 1

First you need to make your identifiers unique, here is a good resource on how to create valid identifiers: What are the valid values ​​for the id attribute in HTML? . You JS need a little work to select only .hidden elements that are descendants of the grid you are currently in, and class declarations for the .something div need a final 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 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

Answer 2

The identifier must be unique. Try using a class instead.

Answer 3

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

Answer 4

The id of the html elements must be unique for the page, if you want to apply something to several elements, use classes ...

There are also a few missing quotes and interval problems.

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