问题描述
我在 jQuery 中使用 sortable。使用 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>
我怎样才能扭转这种情况?
谢谢:)
解决方法
您可以使用 .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>
好吧,我想这不是最好的解决方案,但是您可以通过迭代菜单项来操作可排序菜单中的元素:
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>
<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>