jquery - ドロップ後に親 div にクラスが追加された場合、ネストされた div の境界線の色を変更します

Question

私はjqueryのドラッグアンドドロップを使用しています。ドラッグ可能な要素が正しいスロットにドロップされると、ドラッグ可能な div にクラスが追加され (「正しい」)、背景色が変更されます。

ここで、親 div にクラスが追加されたときに、ドラッグ可能な div のクラス 'info' でネストされた div の境界線の色を変更したいと考えています。これを達成するために以下のコードを変更するにはどうすればよいですか?

$('.info').addClass( 'correct' ); を追加してみました。ここ：

ui.draggable.addClass( 'correct' );
$('.info').addClass( 'correct' );
ui.draggable.draggable( 'disable' );

これにより、クラスが .info に .info.correct OK として追加されますが、info クラスを持つ他のすべての要素に対してもこれが行われます...ドロップ後に親がクラスを追加したときに、その div に対して変更したいだけです正しいスロットで...情報クラスを持つ他のdivではありません...

HTML:

<div id="content">
  <div id="elements">
    <div class="element" id="element_1" data-link="element_1.html">Element 1<a href="#" class="info">i</a></div>
     <div class="element" id="element_2" data-link="element_2.html">Element 2<a href="#" class="info">i</a></div>
  </div>
  <div id="slots">
    <div id="slot_1"></div>
      <div id="slot_2"></div>
  </div>
</div>

Javascript:

    $('#element_1').data( 'number', 1 ).attr( 'id', 'element'+1 ).draggable( {
      containment: '#content',
      stack: '#elements div',
      cursor: 'hand',
      revert: true
    } );

    $('#element_2').data( 'number', 2 ).attr( 'id', 'element'+2 ).draggable( {
      containment: '#content',
      stack: '#elements div',
      cursor: 'hand',
      revert: true
    } );

    $('#slot_1').data( 'number', 1 ).droppable( {
      accept: '#elements div',
      hoverClass: 'hovered',
      drop: handleElementDrop
    } );

       $('#slot_2').data( 'number', 2 ).droppable( {
      accept: '#elements div',
      hoverClass: 'hovered',
      drop: handleElementDrop
    } );
}

function handleElementDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var elementNumber = ui.draggable.data( 'number' );

  if ( slotNumber == elementNumber ) {

ui.draggable.css( 'cursor', 'pointer' );
ui.draggable.click(function(e) {  
        window.open(ui.draggable.attr('data-link'));
    });
    $('.info').addClass( 'correct' );
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
  } 
}