jQuery可排序中的自定义索引

Question

我使用 jQuery sortable 库创建了可排序的项目列表。

HTML：

<ul id="sortable">
    <li id="item1" data-index="1">Item 1</li>
    <li id="item2" data-index="2">Item 2</li>
    <li id="item3" data-index="3">Item 3</li>
    <li id="item4" data-index="4">Item 4</li>
    <li id="item5" data-index="5">Item 5</li>
</ul>

JS：

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log(ui.item.index()); // Returns 0,1,2 etc
        }
    });
})(jQuery);

如何使用li 标签的data-index 属性作为自定义索引？

它应该打印自定义的index 值而不是它自己的index 值，即0,1,2 等。

Answer 1

Working fiddle

您可以使用$(ui.item).data('index') 查看以下示例：

(function($) {
  $('#sortable').sortable({
    stop: function(e, ui) {
      console.log($(ui.item).data('index')); // Returns 0,1,2 etc
    }
  });
})(jQuery);

希望这会有所帮助。

---

(function($) {
  $('#sortable').sortable({
    stop: function(e, ui) {
      alert($(ui.item).data('index')); // Returns 0,1,2 etc
    }
  });
})(jQuery);

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>

<ul id="sortable">
    <li id="item1" data-index="111">Item 1</li>
    <li id="item2" data-index="222">Item 2</li>
    <li id="item3" data-index="333">Item 3</li>
    <li id="item4" data-index="444">Item 4</li>
    <li id="item5" data-index="555">Item 5</li>
</ul>