时间戳

首页 > 解决方案 > 使用 jQuery 根据特定元素值和位置重新排序列表项

jquery - 使用 jQuery 根据特定元素值和位置重新排序列表项

问题描述

好的，我有一个 LI，比方说，其中有 15 个项目。这与我在这里问的上一个问题有关

好吧，我大部分都弄清楚了那部分。但是他们现在想要的是，当我单击一个项目的复选框时，它会动态移动到列表的“前面”，在其他选中的项目后面。

换句话说，起初当没有检查项目时，它们只是按照与数据库匹配的任何顺序排列。但是如果你点击第5个的“锁定”，例如，它应该被选中，并自动移动到列表中的第一个位置。因此，如果他们单击第 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. 如果它是检查的第一个项目，它会转到列表的前面。
  2. 如果已经检查了一个（或多个）项目，则当前检查的项目转到检查项目的末尾。
  3. 如果用户取消选中当前选中的项目，它将转到已选中列表的最后，但未选中。

标签： jquerysortingjquery-uijquery-ui-sortable

解决方案

好的，我决定带着我的解决方案回来。

首先，我开始这样做：

var checkedPos = $('input[id^="theId"]:checked').length;

这给了我已经检查过的项目数量的计数。

然后，在我的点击事件中，我从我的原始帖子中执行了上面的代码。除了我在条件中添加了一个“索引”，我要么做了 +1 要么 -1，以获得正确的索引值。

然后最后，我做了这样的事情：

$("#" + theId).insertAfter("#myList li:nth-child(" + index + ")");

这使我可以通过将选中的列表放入新位置来“重新排序”列表，而无需刷新页面。

推荐阅读