jQuery - Измените css для всех div класса, кроме this

Мне это нужно, поэтому, когда я нажимаю на div класса mydiv ', все div этого класса имеют z-index, равный 1, за исключением того div, на котором я щелкнул, который имеет z-index, равный 2.

При повторном щелчке по div его z-index снова меняется на 1.

На данный момент я придумал следующее:

    $('.mydiv').toggle(function() {
        $('.mydiv').css('z-index','1');
        $(this).css('z-index','2');
    }, function() {
        $(this).css('z-index','1');
    });

Если вы щелкнете по div, а затем щелкните по нему еще раз (возвращая z-index в 1) перед тем, как щелкнуть по другому, все работает нормально.

Однако, если вы щелкнете по div, а затем щелкните по другому, не щелкая по первому (чтобы переключить его обратно на z-index 1), иногда это работает, а иногда ничего не делает. Я предполагаю, что проблема в первой части моего кода, потому что это:

$('.mydiv').css('z-index','1');

Не всегда запускается перед этим:

$(this).css('z-index','2');

Это проблема, и если да, то как я могу это исправить? Спасибо

ОБНОВЛЕНИЕ - Извините, что не подумал об этом изначально, но я упростил мой вопрос здесь, на фактической странице должна быть анимация позиционирования css. Поэтому, когда вы нажимаете на div, он перемещается с плавной анимацией. Я думаю, это означает, что я не могу просто изменить CSS, переключив класс. Спасибо

-

ОБНОВЛЕНИЕ 2 - я думал, что это работает, а затем я протестировал в IE8 и 7. IE9 в порядке (вместе со всеми другими браузерами, с которыми я тестировал), но IE7 и IE8 заставляют все изображения прыгать вокруг, когда вы нажимаете на любой из них. Вот демонстрация (все css и jQuery находятся на странице):

http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

И вот jQuery:

    $(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

I подумайте, что происходит: позиция фонового изображения для div.image-div начинается с -125 пикселей. Когда вы щелкаете div.image-div, jQuery анимирует положение фона для всех остальных div того же класса до -125 пикселей. Должны измениться только раскрытые блоки div, так как другие блоки уже имеют положение фона -125 пикселей.

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

Есть идеи, почему это происходит? Это ошибка jQuery IE или иерархия селекторов CSS? Спасибо