jquery - 为什么 jQuery selected 会收集重复元素

Question

我有一个简单的 li 元素网格，可以选择。一旦选择完成，我就会遍历它们。但是当您在网格中选择多个框时，元素的集合似乎是一组重复项。这里发生了什么？

示例可以在这里找到

Answer 1

不要绑定到selected事件，而是尝试stop像这样绑定到事件：

stop: function() {
    elements = null;
    elements = $('.ui-selected');
    elements.each(function(idx, item) {
        alert($(item).position().top);

    });
}

selected 事件将为您选择的每个项目触发一次，然后您的函数也将每次运行，从而构建在所选项目列表上。通过使用停止事件，该函数仅对每个选定项目运行一次。

jsFiddle 示例。

Answer 2

您的selected回调会为每个选定的项目调用一次。在该回调中，您将查询所有选定的项目，并为每个项目发出警报。

最终结果是，当您选择例如 2 个项目时，selected会为第一个项目调用回调，并且您会收到该项目的单个警报。然后为第二个项目调用您的回调，此时现在选择了两个项目，您现在又收到 2 个警报（总共 3 个）。选择第 3 个项目后，您会收到 6 个警报，依此类推。

无论如何，这就是你所看到的行为的部分原因。查看@j08691 的答案，了解显示您可能想要的行为的解决方案。

Answer 3

看起来选定的函数被多次调用，实际上是为每个选定的元素调用一次。

我已经修改了您的代码以查看以下内容：

elements = $('.ui-selected');
console.log(elements);

从http://jqueryui.com/demos/selectable/的文档中，它建议“此事件在选择操作结束时触发，在添加到选择的每个元素上。” 所以你看到的是预期的行为。

我认为您想要的是“停止”事件：

$("#selectableGrid").selectable({
    stop: function() {
        elements = $('.ui-selected');
        elements.each(function(idx, item) {
            alert($(item).position().top);
        });
    }
});​