jquery :not not working

Here is my HTML

<div class="records" id="1">
        <div class="controls">
            <a class="special">
                <img class="1" src="special1.png" class="shown" />
                <img class="1" src="special0.png" class="hidden" />
            </a>
        </div>
</div>

<div class="records" id="2">
        <div class="controls">
            <a class="special">
                <img class="1" src="special1.png" class="hidden" />
                <img class="0" src="special0.png" class="shown"/>
            </a>
        </div>
</div>

It is HTML output of what is retrieved from db. But at one time, only one of the images are shown in one record either special1.png or special0.png, but when user clicks at any a.special I want the special1.png of that record to be visible and all the images in other 开发者_StackOverflow社区a.special have to only display special0.png. For this I tried to do this using this

$(".controls a").click(function() {
    var action = $(this).attr('class');
    var id = $(this).parent(".controls").parent(".records").attr('id');

    //Now send post request and database things
    //function(data) { //After this stage
       $(this).children("img.1").show(); //show the active image
       $(this).children("img.0").hide(); //hide the inactive image

    //However this below I used :not to skip current element but it doesn't, it hides all inactive image and shows all active images

       $("div:not(#"+id+") a.special img.1").hide(); //hide all the active image except this one 
       $("div:not(#"+id+") a.special img.0").show(); //show all the in-active image except this one 

    // } //
});

---

First, I think :not() is failing because you are using numbers as IDs, which is not allowed in HTML4. All id attributes must start with an alphabetic character. You could prefix your ids with r, for instance:

<div class="records" id="r1">

Second, you can do this much more efficiently using the .not method:

$(".controls a").click(function() {
    var action = this.class;
    var record = $(this).closest(".records")[0]; // get the DOM element of the ancestor .records

    //Now send post request and database things
    //function(data) { //After this stage
       $(this).children("img.r1").show(); //show the active image
       $(this).children("img.r0").hide(); //hide the inactive image

       $("div").not(record).find("a.special img.r1").hide(); //hide all the active image except this one 
       $("div").not(record).find("a.special img.0").show(); //show all the in-active image except this one 

    // } //
});

Note the use of

• this.class to replace $(this).attr('class')
• .closest('.records') to find the closest ancestor element with the class records
• [0] to get the DOM element from the jQuery selection
• .not(record) to remove the record element from the set
• .find() to find all descendent elements matching a particular selector

---

I don't think its the issue of :not.

You see, in your first div, both the images have class="1". that might be the issue. try setting class="0" to one image of them.

---

It would be worth trying the .not() method. It makes your selector cleaner and can also take function as as argument which lends more capability.

Also,as I've already mentioned - HTML4 Id's a> must begin with a letter A-Z or a-z
b> Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")