Question

我希望有一个jquery列表在加载时自动排成两个大小相等的列。

无法弄清楚如何让它工作 - 使用'split-list'功能不适用于可排序的插件。

有关如何将这样的五个列表分成两列和两列的任何想法，当项目被拖入时，它们会自动更新吗？

<ul id="sortable" class="split-list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>   
</ul>

Answer 1

如果我理解正确，您可以使用slice()方法检索一组元素，使用wrapAll()将其包装在新的<ul>中，并在最后{{1}之后插入使用insertAfter()，如下所示：

<ul>

 $(split);

 function split() {
   var listItems = document.querySelectorAll("ul li");
   for (var i = 2; i < listItems.length; i += 2) {
     $(listItems).slice(i, i + 2).insertAfter("ul:last").wrapAll($("<ul/>", {
       class: "sortable connectedSortable"
     }));
   }
   $(".sortable").sortable({
     connectWith: ".connectedSortable"
   }).disableSelection()
 }

ul {
  display: inline-block;
}

每当列表更新时，再次调用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <ul class="sortable connectedSortable split-list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>函数。

jQuery可排序列表分为两列？

1 个答案: