Question

我有一个清单：

<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>

它可以通过以下方式拖延：

var el = document.querySelectorAll('.draggable');
for (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; // the current dragged HTMLElement

            // show .done here

        }
    });
}

测试jsFiddle。

我的问题是，如果用户拖动某个项目，如何显示.done div？

所以在onUpdate中，我想要定位.done div。通常，在jQuery中，我会做类似的事情：

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

但这在这里显然不起作用。

这里有什么正确的方法？请注意，我无法向.done div添加ID。

Answer 1

尝试在此上下文中使用.closest(selector)和.next()来实现您的目标，

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

用户完成拖动元素后的目标div

1 个答案:

DEMO