我正在使用 jQuery UI 的 Sortable 来重新排序一些列表项。我想根据排序后更新的顺序更新每个li的类。这是我的 html:
<ul id="sortable">
<li class="1">apple</li>
<li class="2">orange</li>
<li class="3">pear</li>
<li class="4">peach</li>
</ul>
我想要实现的是在将梨排序在苹果之上之后,我的类更新如下:
<ul id="sortable">
<li class="1">pear</li>
<li class="2">apple</li>
<li class="3">orange</li>
<li class="4">peach</li>
</ul>
这个 JSFiddle 接近我想要的,但我想更新类而不是 html:http://jsfiddle.net/4mcpq/3/
最佳答案
由于更改一个 li
的位置会更改所有其他 li
的 class
,因此实现此目的的唯一明智方法是迭代在 .sortable
的 update
回调中的 li
元素上:
"update": function (event, ui) {
$(this).children().each(function (i, elem) {
var li = $(elem), // cache lookup
cssClass = elem.className.split(' ').filter(function (name, i, array) {
return /^js[-]\d+$/g.test(name);
}).join(''); // adding .join('') to transform to string
// classes cannot start with a number (see http://www.w3.org/TR/CSS21/grammar.html#scanner).
// using pattern of "js-#" for the custom class
$(elem).removeClass(cssClass).addClass('js-' + i);
});
}
工作演示:http://jsfiddle.net/4mcpq/210/
警告:如果您有数千个 li
元素,这可能会减慢您的 UI。根据您想要执行的操作,有更简单(且更明智)的方法来获得正确的目标 li
。
关于javascript - jQuery Sort 后获取更新的订单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26915915/