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

Question

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

Example can be found here

Answer 1

看起来好像选定的函数被多次调用，实际上每个选定的元素都会调用一次。

我修改你的代码，看看这个：

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

Answer 2

而是结合了selected事件，尝试结合stop事件是这样的：

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

    }); 
} 

选定的事件会为您选择的每个项目火一次，然后你的函数也每次运行，从而建立在选定项目的列表上。通过使用停止事件，该功能只对每个选定的项目运行一次。

jsFiddle example。

Answer 3

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

最终结果是，当您选择例如2个项目时，将为第一个项目调用您的selected回调，并为该项目获取单个警报。然后为第二个项目调用回调函数，此时现在选择了两个项目，现在您可以再获得2个警报（总共3个）。选择第三个项目后，您将获得6个警报，依此类推。

无论如何，这就是为什么它的一部分，关于你所看到的行为。查看@ j08691的答案，找到一个解决方案，显示您可能要做的行为。