Select All Elements Except Some

Hi Everyone,

I have problem selecting all elements except some. i tried the code below:

$("*:not('#icon')").click(function() {
    $(".list").hide()
}

I am trying to create something like facebook 3 notification icon (invites,messages,updates) wherein when you click the icon, it will show the notification list. And when you click outside the list anywhere in the page (except the icons as it should trigger the show function) , it will hide the list.

I know this is a simple one. But cant figure out why things does not work.

Hope anyone can answer my question. if you have other way of doing it, it will be much appreciated.

You don't want to bind a click event to virtually every single element in the document, you should bind it to the document itself:

$(document).click(function() { ... });

That will be far more efficient during the bind. You can then use the event object's target property, which will contain a DOM object of the element clicked, in a comparison with itself:

$(document).click(function(event)
{
    if ($('#id_of_icon')[0] != event.target) {
        $('.list').hide();
    } else {
        $('.list').show();
    }
});

The [0] is included there so that we compare the raw DOM object, instead of the jQuery wrapper object.

Hi Adam,

Thank you for your quick reply. Its almost working.

I tried this code:

$(document).click(function(event){
    if ($('.notificon')[0] != event.target) {
        $('.newslist').hide();
    }   // I removed the else part as I have another code to process it
});

It only works for the first .notificon it finds. I have 3 elements with class "notificon". I liked it to read any of them. I tried to removed the [0] but it doesn't work. I tried $(this).find('.notificon')[0] != event.target , which I found before to be useful in such cases but it did not work...

I also tried to add each function:

$(document).click(function(event){
$(".notificon").each(function(event) {
    if ($(this) != event.target) {
        $('.newslist').hide();
    }
}
});

I don't know if I executed it correctly, it did not work.

How can I make it work for all class "notificon"?

When there's multiple matches with a selector, an array of raw DOM objects is returned -- you can tell they're the raw object because you have to pass them through the jQuery 'constructor' again within the handler.

So $('.notificon')[0] would equate to the first DOM object in the array, which explains why it worked for the first icon only. You were on the right track using the each iterator, but the logical problem is if it's say the second notification that was clicked, when the first notification was checked first it wouldn't be equal to the event target and so the pop-up would be hidden immediately.

So before you call .hide() you need to have checked each object, which would be best done with a simple flag:

$(document).click(function(event)
{
    var match = false;

    $(".notificon").each(function(i, obj)
    {
        if (obj == event.target) {
            match = true;
        }
    });

    if (!match) {
        $('.newslist').hide();
    }
});

Question that comes to mind though, is that do these icons all trigger the same pop-up? If so this wouldn't really be the best method to do it. I would suggest checking for a shared class within the event target:

    if (!$(event.target).hasClass('notificon')) {
        $('.newslist').hide();
    }

Might have been the best method anyway thinking about it! Also I've just realised the pop-up would be hidden even if you clicked the actual pop-up, so need to add a further check:

    var target = $(event.target);

    if (!target.hasClass('notificon')
     && !target.hasClass('newslist')) {
        $('.newslist').hide();
    }

Sorted!

Hi Adam,

That was a full solution! Thank you very much. You're such a pro.

This topic is solved

By the way, I have another question that hasn't been answered yet. I may be asking too much but just in case you have time.

http://www.phpfreaks.com/forums/index.php?topic=347917.msg1641693#msg1641693

Thank you again.