jQuery и CSS не работают должным образом в IE9

Question

Когда у меня есть 2 экземпляра сетки, jquery не поднимает второй список сетки, но делает это для первого.Обе сетки также работают в Opera, Chrome, Safari и Firefox ... только 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

Сначала вам нужно сделать свои идентификаторы уникальными, вот хороший ресурс о том, как создать действительные идентификаторы: Каковы допустимые значения атрибута id в HTML? . Вам, JS, нужно немного поработать, чтобы выбрать только элементы .hidden, являющиеся потомками сетки, над которой вы в данный момент находитесь, а для объявлений классов для элементов .something требуется заключительная кавычка:

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>

Документы для .index(): http://api.jquery.com/index

Answer 2

вы пропускаете кавычки после something класса. это работает в IE9 и FF8 http://jsfiddle.net/2QK8u/, и ваши идентификаторы должны быть уникальными

Answer 3

идентификаторы html-элементов должны быть уникальными для страницы, если вы хотите применить что-то к нескольким элементам, используйте классы ...

Есть также несколько пропущенных кавычек и пробелов.

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

Answer 4

ID должны быть уникальными.Попробуйте вместо этого использовать класс.