Question

我有一个简单的li元素网格，我已经选择了。然后，一旦选择完成，我就迭代它们。但是，当您在网格中选择多个框时，元素集合似乎是一组重复项。这是怎么回事？

Answer 1

不要绑定到selected事件，而是尝试绑定到stop事件，如下所示：

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

    });
}

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

<强> jsFiddle example

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);
        });
    }
});

为什么选择jQuery会收集重复的元素

3 个答案: