Jquery 可排序索引反向

Question

我正在使用 sortable with jQuery。使用 Sortable 时，它会给出自上而下的索引值。例如：

 <ul id="sortable">
        <li>Item 1</li> /O.Index
        <li>Item 2</li> /1.Index
        <li>Item 3</li> /2.Index
 </ul>

我希望它看起来像这样：

<ul id="sortable">
            <li>Item 1</li> /2.Index
            <li>Item 2</li> /1.Index
            <li>Item 3</li> /0.Index
</ul>

我怎样才能扭转这种局面？

谢谢:)

Answer 1

您可以使用 .get() and Array.prototype.reverse():

追加新订购的 children

var ulEl = $('#sortable');
ulEl.append(ulEl.children('li').get().reverse());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 2

好吧，我想这不是最佳解决方案，但您可以通过迭代菜单项来操作可排序菜单中的元素：

var menuItems = $('#sortable').children('li');

menuItems.get().map((menuItem, index) => {
 menuItem.dataset.reverseIndex = (menuItems.length-1) - index
});

结果将是：

<ul id="sortable">
  <li reverseIndex="2">Item 1</li>
  <li reverseIndex="1">Item 2</li>
  <li reverseIndex="0">Item 3</li>
</ul>

jsFiddle:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
var menuItems = $('#sortable').children('li');

menuItems.get().map((menuItem, index) => {
 menuItem.dataset.reverseIndex = (menuItems.length-1) - index
});
</script>
</body>
</html>

Jquery 可排序索引反向

Jquery Sortable Index Reverse

javascript

jquery

jquery-ui-sortable

fabricjs