looping and drag and drop

I am trying to loop through each area and checking if they match the image class number then it should drop in correct place. You can see that i commented out the loop and if statement because it doesn't work. Can anyone shine light on this because i'm frustrated with this issue. :(


$(document).ready(function(){

var images = $('#clothes').find('img');
var drop = $('#dress').find('area');

for(var a=0; a < images.length; a++){
$( images[a] ).draggable( );
//alert($(images[i]).hasClass("20"));
if($(images[a]).hasClass("20")){
$( images[a] ).draggable({ revert: 'valid' });
//alert("WRONG");
}

else{
$( images[a] ).draggable({ revert: 'invalid' });
}

/*for(var b=0; b < drop.length; b++){
$( drop[k]).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" )

/*if($(images[a]).attr('class').split(" ")[0] == $(drop[b]).attr('class')){
alert("RIGHT");
$(images[a]).draggable({ revert: 'invalid' });

}
else if($(images[a]).hasClass("20")){
$( images[a] ).draggable({ revert: 'valid' });
}
//alert("a = " + $(images[a]).attr('class').split(" ")[0] + " b = " + $(drop[b]).attr('class'));

}
});
}*/
}




});

Before I go any further into your sample, I would like to point out a possible error
/*for(var b=0; b < drop.length; b++){
$( drop[k]).droppable({

Ok, that was embarrassing. :o I must have changed the code several times and forgot to change the variable. I must have forgot to posted the updated code. I changed some of my codes.

However i am still having this issue. Perhaps my logic for this is wrong. :confused:


$(document).ready(function(){

var images = $('#clothes').find('img');
var drop = $('#dress').find('area');

for(var a=0; a < images.length; a++){
$( images[a] ).draggable( );
//alert($(images[i]).hasClass("20"));
if($(images[a]).hasClass("20")){
$( images[a] ).draggable({ revert: 'valid' });
//alert("WRONG");
}

else{
//$( images[a] ).draggable({ revert: 'invalid' });
//alert("a = " + $(images[a]).attr('class').split(" ")[0]);


for(var k=0; k < drop.length; k++){


$( drop[k]).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//$( this ).addClass( "ui-state-highlight" )

//alert("a = " + $(images[a]).attr('class').split(" ")[0] + " k = " + $(drop[k]).attr('class').split(" ")[0]);
if($(images[a]).attr('class').split(" ")[0] == $(drop[k]).attr('class').split(" ")[0]){
alert("RIGHT");
//$(images[a]).draggable({ revert: 'invalid' });

}
/* else if($(images[a]).hasClass("20")){
$( images[a] ).draggable({ revert: 'valid' });
}*/

}
});
}
}
}


/*for(var b=0; b<drop.length; b++){
$( drop[b]).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" )


}
});
}*/

});