Question

Sorry, this may be a long one so please bear with me. I have three sortable (jqueryUI) lists. List all-colls-list, coll-selected-list and coll-grouped-list. I can put items of list all-colls-list into coll-selected-list and coll-grouped-list.

So for example, I can put ‘list item’ into both coll-selected-list and coll-grouped-list at the same time, and the item will be retained in all-colls-list. When the item is added to coll-selected-list, a class name “selAdded” is attached to the list item in all-colls-list. When an item is added to coll-grouped-list, a class name ‘groupAdded” is attached to the list item in all-colls-list.
ex:

<li class"selAdded">Blah blha</li> OR
<li class"groupAdded">Blah blha</li> OR (when item is put in both lists)
<li class"selAdded groupAdded">Blah blha</li>

When I remove the item from either coll-grouped-list or coll-selected-list, it removes the respective class name for that item in all-colls-list. However, if two class names are present, and I remove only one, for some reason, it removes both!
So, if I were to remove “selAdded” from <li class"selAdded groupAdded">Blah blha</li>
it seems that it only leaves <li>Blah blha</li>

I’ve made a fiddle here http://jsfiddle.net/noscirre/xf8j2/

This is my code that removes the class name:

if ($("#all-colls-list li:contains(" + itemName + ")").hasClass("selAdded")) {
                $("#all-colls-list li:contains(" + itemName + ")").removeClass("selAdded"); }

and this is the code that checks for the existence of the class once it has been removed:

receive: function (event, ui) {
                alert($(this).attr('class'));
                if ($(this).hasClass("groupAdded") && $(this).hasClass("selAdded")) {
                    alert("both");
                    //Do nothing
                }
                if ($(this).hasClass("groupAdded") && !$(this).hasClass("selAdded")) {
                    alert("group"); //Do nothing
                } 
                if (!$(this).hasClass("groupAdded") && $(this).hasClass("selAdded")) {
                    alert("sel"); //Do nothing
                }
                if (!$(this).hasClass("groupAdded") && !$(this).hasClass("selAdded")) {
                    alert("none"); //Do nothing
                }
            }

Any help would be much appreciated

Answer 1

It looks like the classes are being added and removed as you’re wanting, but the code that’s checking their existence isn’t working properly. When you’re checking for the classes, $(this) is referring to the parent <ul> rather than the <li> and so shows ‘none’, because the <ul> has neither the selAdded nor the groupAdded class.

I was using Chrome’s inbuilt inspector to look for the classes while I was dragging things around in your fiddle. I used console.log($(this)); so I could have a look in the error console to be sure what was $(this) was actually referring to at that point in the code.