Select everything APART from a certain element of ID in Jquery

Question

Hello,

I am trying to highlight a certain set of elements on a page by dimming everything else on the page. The below Div and all its child elements I would like to keep full opacity and the rest, I would like to dim to about 50%. This Div just sits in the main body of the page.

    <div id="basket">

    <div id="basket-contents">

        <div id="basket-messages">
        </div>


        <div id="basket-items">
        </div>

    </div>

</div>

I have tried the following in my JQuery, but it still dims the whole page, including this Div.

    // On hover basket start...
$("#basket").hover(
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    },
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    }
);

Can anyone point me in the right direction???

Thanks in advance.

Answer 1

Have you tried without the $ as part of your selector: ie,

$(':not(#basket)').animate({opacity: 0.5}, 1);

Answer 2

I'm not sure whether or not you'll need the wildcard * selector. Also, as intimated by Jamiec, drop the $ from your string:

$('*:not(#basket)').animate({opacity: 0.5}, 1);

Also, have you looked at some plugin code (e.g. BlockUI) that does this how it achieves the effect?

EDIT:

Does this have any effect:

$('*[id!=basket]').animate({opacity: 0.5}, 1);

I have tested this in the following way on a page of my own:

alert($("*").length);                //returns '78'
alert($("*[id!=FundTable]").length); //returns '77' 

So I know this works. Can you confirm this with your page?

Answer 3

If the opacity of all other elements in the page are changed and if the #basket div is inside any other element then this div will also get the opacity property inherited from the parent.

It would be better to place another div with page height and width and then put the stacking index of the #basket div to a higher value.

Answer 4

Try this

 $("div[id^='basket']").animate({opacity: 0.5}, 1);

that would select all divs with an id that starts with "basket" and then de id can continue. if what you want is all div except the basket ones, you can add a :not . Look in the attribute Filter section of this link text that are listed other ways to acces to atributes of elements.