Question

How can I select all divs of a class except ‘this’, and also not the next and previous div? The code below selects everything except for ‘this’:

$(".image-div").not(this).each(function() {
            $(this).animate({
                    width: '250px'
                }, 500, function() {
                // Animation complete.
            });
        }   
    });

Thanks

UPDATE – Here is my full code:

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


    if ($(this).css('width') != '500px') {

        $(this).animate({
            width: '500px'
            }, 500, function() {
            // Animation complete.
        });

        $(this).prev().animate({
            width: '125px'
            }, 500, function() {
            // Animation complete.
        });

        $(this).next().animate({
            width: '125px'
            }, 500, function() {
            // Animation complete.
        });


    } else {
        $(this).animate({
            width: '250px'
            }, 500, function() {
            // Animation complete.
        });
    }


    $(".image-div").not(this).each(function() {
            $(this).animate({
                    width: '250px'
                }, 500, function() {
                // Animation complete.
            });

    });


});

All div.image-div’s start out 250px wide. I need it so when you click on a div, it expands to 500px and its neighbors on both sides (also div.image-div’s) shrink to 125px.

When you click on the div again it and its neighbors re-size to 250px. Also if you click on another div, all the divs (except for the clicked on div and its neighbors) re-size to 250px.

Thanks

Answer 1

I changed it a little bit for my own understanding, but you should be able to figure it out. It’s sloppy, but it works.

var divClicked = $(this);

$(".image-div").not(divClicked).not($(".image-div").next()).not($(".image-div").prev()).each(function() {
       $(this).css({
             background: 'blue'
       });

});