Get the parent id..

Question

I have a bunch of elements like the following:

     <div class="droppableP" id="s-NSW" style="width:78px; height:63px; position: absolute; top: 223px; left: 532px;">  
 <div class="sensible"></div>  
      </div>  

They all have class droppableP but different id's obviously and I would like to factor the code in this script I am hacking on. The original script just has a specific selector for each of one of these divs, but the code is all alike except for the id it does things to, which is either the id of the parent or another div with a name that's related to it. Here is the original code specifically for this div:

$("#s-NSW > .sensible").droppable( {  
    accept : "#i-NSW",  
    tolerance : 'intersect',  
    activeClass : 'droppable-active',  
    hoverClass : 'droppable-hover',  
    drop : function() {  
        $('#s-NSW').addClass('s-NSW');  
        $('#s-NSW').addClass('encastrada');  //can't move any more..  
        $('#i-NSW').remove();  
        $('#s-NSW').animate( {  
            opacity: 0.25   
        },200, 'linear');  
        checkWin();  
    }  
 });  

Here is how I would like to factor so the same code can do all of them and I will eventually do chaining as well and maybe get rid of the inline styles but here is my first go:

$(".droppableP > .sensible").droppable( {  
    accept :    "#i" + $(this).parent().attr('id').substring(2),   
    tolerance : 'intersect',  
    activeClass : 'droppable-active',  
    hoverClass : 'droppable-hover',  
    drop : function() {  
  $(this).parent().addClass($(this).parent().attr('id'));  
  $(this).parent().addClass('encastrada');   
  $("#i" + ($this).parent().attr('id').substring(2)).remove();   
  $(this).parent().animate( {  
      opacity: 0.25   
  },200, 'linear');  
  checkWin();  
    }  
});

The error I get is:

$(this).parent().attr("id") is undefined

Many thanks. I have browsed related questions the one I understand that's closest to mine, turns out they didn't need parent function at all. I'm kind of a noob so please don't yell at me too hard if this is a stupid question. and sorry I'm having a horrible time with the format

Answer 1

You have to pass each draggable element to your function to process, and return true if your droppable accepts it.

try:

$(".droppableP > .sensible").droppable( {  
  accept : function(draggable) { 
    return $(draggable).attr("id") == "i" + $(this).parent().attr('id').substring(1);
},   

Answer 2

Here is the solution that works: I needed an each iterator in there. I think that was the magic bullet.

     $(".droppableP > .sensible").each(function() {
        $(this).droppable( {
           accept :    "#i" + $(this).closest('.droppableP').attr('id').substring(1), 
           tolerance : 'intersect',
           activeClass : 'droppable-active',
           hoverClass : 'droppable-hover',
           drop : function() {
               //console.log($(this).closest());
               $(this).closest('.droppableP').addClass($(this).closest('.droppableP').attr('id'));
               $(this).closest('.droppableP').addClass('encastrado');
               $("#i" + $(this).closest('.droppableP').attr('id').substring(1)).remove();
               $(this).closest('.droppableP').animate( {
                     opacity: 0.25 
                  },
                  200, 
                  'linear'
               );
               checkWin();
           }
        }); 
 });