Question

我正在尝试使用 Ctrl + ↓重新排序列表项，以更改JavaScript中列表中的顺序。请参阅以下代码：

<ul>
<li tabindex="0">item one </li>
<li tabindex="0">item two </li>
<li tabindex="0">item three </li>
<li tabindex="0">item four </li> 
</ul>

我该怎么做？

Answer 1

这样做：

$('li').keydown(function(e) {
  var li= $(this);
  if(e.ctrlKey) {
    switch(e.which) {
      case 38: li.insertBefore(li.prev()); break; //up
      case 40: li.insertAfter(li.next());  break; //down
    }
    li.focus();
  }
});

Fiddle

Answer 2

尝试;

$(li1).detach().insertAfter(li2);

或

$(li1).detach().insertBefore(li2);

Answer 3

将此代码与Jquery一起使用：此示例使用向上箭头（38）。使用＆＃39; down＆＃39;箭头，用40替换38（在我的chrome中，向下箭头打开一些扩展功能）：

$(document).ready(function(){
$('body').keydown(function(e){
    if (e.ctrlKey && e.which == 38){//check if ctrl key is pressed
        var lis = $('ul > li'); //get all li's

        //order the li's
        not_ordered = new Array();
        for(i=0; i < lis.length; i++){
            not_ordered.push(lis[i].innerText);
        }
        ordered = not_ordered.sort();
        //rebuild the li's with new order:
        var new_ul_content = '';
        for(i=0; i < ordered.length; i++){
            new_ul_content += '<li tabindex="0">' + ordered[i] + ' </li>';
        }
        //replace ul content with new content:
        $('ul')[0].innerHTML = new_ul_content;
    }

});

}）;

如何使用键盘事件重新排序无序列表中的列表元素？

3 个答案: