javascript - Target div once user has finished dragging element -

i have list:

<ul class="draggable">     <li><span class="drag">::</span> item 1</li>     <li><span class="drag">::</span> item 2</li>     <li><span class="drag">::</span> item 3</li> </ul>  <div class="done" style="display:none;">    yay! </div> 

and draggable via:

var el = document.queryselectorall('.draggable'); (var i=0;i<el.length; i++) {     var sortable = sortable.create(el[i], {         handle: '.drag',         animation: 150,         onupdate: function (evt/**event*/){             var item = evt.item; // current dragged htmlelement              // show .done here          }     }); } 

test jsfiddle.

my question is, how show .done div once user has dragged item?

so in onupdate, want target .done div. normally, in jquery, like:

jquery(this).parent().parent().next().show(); 

but doesn't work here.

what correct approach here? note can't add id .done div.

try use .closest(selector) along .next() @ context achieve want,

var item = evt.item; // current dragged htmlelement $(item).closest(".draggable").next(".done").show(); 

demo