使用jQuery根据特定元素的值和位置对列表项进行重新排序
使用jQuery根据特定元素的值和位置对列表项进行重新排序
提问于 2018-06-05 21:26:03
好的，我有一个LI，假设它有15个项目。这与前面的问题I asked here有关
好吧，那部分我大部分都搞清楚了。但他们现在想要的是，当我单击一个项目的复选框时，它会动态地移动到列表中其他选中项目后面的“前面”。
换句话说，一开始，当没有选中任何项时，它们只是按与数据库匹配的顺序排列。但是如果你点击第五个的“锁”，例如，它应该被选中，并自动移动到列表中的第一个位置。因此，如果他们点击了第7个“锁”，它应该会移动到列表中的第二个位置，以此类推。
LI中的每一项都有它自己的唯一ID，所以我不认为这是一个问题。我只是不确定如何在jQuery中做到这一点。
对于每个请求，下面是我拥有的当前代码(这是我所获得的最新代码)：
var checkedPos = 0;
$('input[id^="theId"]').on('click',
function() {
var theId = this.id.slice(5);
var chkVal = this.checked;
var suppId = <%= Request.QueryString["pid"]%>;
if (chkVal === true) {
updateRecordLock(theId, suppId, chkVal, checkedPos);
checkedPos++;
$("#" + theId).removeClass("sortable");
} else {
checkedPos--;
updateRecordLock(theId, suppId, chkVal, null);
$("#" + theId).addClass("sortable");
}
});
我想做的是：
- 如果它是第一个选中的项，则转到列表的最前面。
- 如果已经有一个(或多个)选中的项，则当前选中的项将转到选中项的末尾。
- 如果用户取消选中当前选中的项，它将转到选中列表的最末尾，但未选中。
回答 1
Stack Overflow用户
发布于 2018-06-08 21:31:26
好的，我决定带着我的解决方案回来。
首先，我开始这样做：
var checkedPos = $('input[id^="theId"]:checked').length;这给了我已经检查的项目数量的计数。
然后，在我的单击事件中，我做了上面的代码，从我的原始post.Except我添加了一个“索引”到我做了+1或-1的条件，以获得正确的索引值。
最后，我做了这样的事情：
$("#" + theId).insertAfter("#myList li:nth-child(" + index + ")");这允许我通过将选中的列表放到新位置来对列表进行“重新排序”，而无需刷新页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50701294
复制相关文章
相似问题