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);

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

它应该打印自定义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>

jQuery中的自定义索引可排序

1 个答案: