爲什麼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的答案，找到一個解決方案，顯示您可能要做的行爲。