Obtenha o ID do pai

Question

Eu tenho um monte de elementos como o seguinte:

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

Todos eles têm o DropPablep de classe, mas é obviamente diferente e eu gostaria de levar em consideração o código neste script que estou invadindo. O script original possui apenas um seletor específico para cada um desses Divs, mas o código é todo semelhante, exceto pelo ID que faz as coisas, que é o ID do pai ou outro div com um nome relacionado a ele. Aqui está o código original especificamente para esta 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();  
    }  
 });  

Aqui está como eu gostaria de levar em consideração para que o mesmo código possa fazer todos eles e, eventualmente, também farei o encadeamento e talvez me livrar dos estilos em linha, mas aqui está a minha primeira tentativa:

$(".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();  
    }  
});

O erro que recebo é:

$(this).parent().attr("id") é indefinido

Muito Obrigado. Eu naveguei em perguntas relacionadas Aquele que eu entendo que é mais próximo do meu, acontece que eles não precisavam de função dos pais. Eu sou meio que um noob, então, por favor, não grite muito comigo se essa for uma pergunta estúpida. e desculpe, estou tendo um tempo horrível com o formato

Answer 1

Aqui está a solução que funciona: eu precisava de um iterador lá. Eu acho que essa foi a bala mágica.

     $(".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();
           }
        }); 
 });

Answer 2

Você precisa passar cada elemento arrastado para sua função para processar e retornar true se o seu droppable o aceitar.

tentar:

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