Jquery 可排序索引反向答案

【问题标题】：Jquery Sortable Index ReverseJquery 可排序索引反向
【发布时间】：2021-04-08 20:08:53
【问题描述】：

我正在使用可排序的 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>

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

谢谢:)

【问题讨论】：

你要反转你的 lis 吗？

标签： javascript jquery fabricjs jquery-ui-sortable

【解决方案1】：

您可以使用.get() 和Array.prototype.reverse() 附加新的有序子代：

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>

【讨论】：

【解决方案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>

【讨论】：