Javascript 仅在选择器中可见的项始终返回-1

（此处使用jquery ui）

小提琴：

目标：拖动任何蓝色按钮时，另一个按钮应隐藏，我通过index（）计算dom上.user_任务的以前实例

如果我的选择器中没有：visible部分，代码将正常工作，我将在单击的项目之前获取项目总数，并在选择器中添加：visible，它将始终返回-1

$("#sortable").sortable({
    items: ".user_task",
    appendTo: "body",
    helper: "clone",
    revert: true,
    start: function(event, ui) {
        var taskid = ui.item.data("taskid");
        $("[data-taskid='" + taskid + "']").not(ui.helper).hide();

        var x = $(".user_task:visible").index(ui.item);
        $("#counter").text(x);
    },
}); 

我的最终结果应该是，拖动最后一个蓝色按钮，x=2（例如）

一个讨厌的黑客

$("#sortable").sortable({
    items: ".user_task",
    appendTo: "body",
    helper: "clone",
    revert: true,
    start: function (event, ui) {
        var taskid = ui.item.data("taskid");
        $("[data-taskid='" + taskid + "']").not(ui.helper).hide();

        var $usertasks = $(".user_task");
        var all = $usertasks.index(ui.item);
        var hidden = $usertasks.slice(0, all).not(':visible').length;
        var x = all - hidden;

        $("#counter").text(x);
    },
});

演示：

一个讨厌的黑客

$("#sortable").sortable({
    items: ".user_task",
    appendTo: "body",
    helper: "clone",
    revert: true,
    start: function (event, ui) {
        var taskid = ui.item.data("taskid");
        $("[data-taskid='" + taskid + "']").not(ui.helper).hide();

        var $usertasks = $(".user_task");
        var all = $usertasks.index(ui.item);
        var hidden = $usertasks.slice(0, all).not(':visible').length;
        var x = all - hidden;

        $("#counter").text(x);
    },
});

---

演示：

为什么要查找可见索引？是否有任何特定的逻辑需要参见我对Rory答案的评论。Irvin，这只是计算可见元素的总数，而不是在按下项之前的元素（如果您开始在代码x=4中拖动1，它应该是x=0）为什么要查找可见索引？是否有任何特定的逻辑需求请参见我对Rory答案的评论。Irvin，这只是计算可见元素的总数，而不是在按下项之前的元素（如果在代码x=4中开始拖动1，则应为x=0）我仍然得到相同的结果，当拖动“4”时，结果应为2，它仍然在计算隐藏元素。我不想计算所有可见元素，只是我拖动的元素之前的元素。我仍然得到相同的结果，当拖动“4”时，结果应该是2，它仍然在计算隐藏元素。我不想计算所有可见元素，只是我拖动的元素之前的元素。