jquery - Change border color of nested div when parent div has class added after drop -

i'm using jquery drag , drop. when draggable element dropped onto correct slot, draggable div gets class added ('correct') change background color.

now, want change border color of nested div class 'info' in draggable div when parent div gets class added. how can modify code below acheive this?

i have tried adding $('.info').addclass( 'correct' ); here:

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

whilst adds class .info .info.correct ok, other elements have info class...i want change div when parent gets class added after dropping on correct slot...not other divs have info class...

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 );   }  } 

just need traverse original element using parent() selector.

ui.draggable.parent().find('.info').addclass('correct')