Question

This is related to a question I’ve asked previously: Calling Javascript function after loading an AJAX page

Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.

$('.thumbnail_small').live('click', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.

I tried

$('#left_box').on('click', '.thumbnail_small', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

but it doesn’t work. Any ideas? Thanks in advance.

Answer 1

I’d suggest repeating your seletor, using the not method to exclude the current element:

$('#left_box').on('click', '.thumbnail_small', function(){
    $(this).css('border-color','#000');
    $('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});

This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.