jQuery：我需要每個「點擊」項目的「每個」？

有jQuery：我需要每個「點擊」項目的「每個」？

/* 1 */ 
 
$("div").click(function(e) { 
 
    alert(".click() called on '" + e.currentTarget.id + "'"); 
 
}); 
 

 
/* 2 
 
$("div").each(function(){ 
 
    $(this).click(function(e) { 
 
     alert(".click() called on '" + e.currentTarget.id + "'"); 
 
    }); 
 
}); 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="target 1"> 
 
    The Target One 
 
</div> 
 
<div id="other 2"> 
 
    The Target TWO 
 
</div>

是兩個功能1和2之間的區別是什麼，知道結果是一樣的嗎？！...

來源

2017-04-19 Serge

除了不太清晰並且手動執行某些操作之外沒有任何區別jQuery可以爲您做的事情。 –

沒有區別。在示例2中的每個都是多餘的 –

所以我可以寫第一個版本沒有功能限制/差異與第二個 – Serge

對於簡單地將一個事件處理程序附加到一堆元素的用例，兩種解決方案之間沒有區別。

這裏有更詳細一點的兩種方法：

JQuery的each是相當於Array.prototype.forEach。它使您可以選擇迭代數組中的每個元素（或者更普遍地說 - 集合）。通常用於執行上下文相關的函數（使用輸入集合的不同元素執行特定的操作）。在你的例子2中，你可以插入一個if子句來排除某些div元素從接收點擊處理程序或做額外的事情，這不應該進入事件處理程序。

選項1是附加事件處理程序的直接方法。由於在原生JavaScript中，您無法一次定位多個元素（但這是一個非常常見的用例），因此「手動」必須迭代您的HTML元素集合。然而，這不是最簡單的任務，因爲返回的NodeList沒有用來簡單地遍歷它的元素*。在香草JS的一種常見方式是，從所述陣列原型借用迭代函數，並創建這樣的怪物：

Array.prototype.forEach.call(document.querySelectorAll("element"), 
    function(element){element.addEventListener("type", 
     function(){/* code */} 
    )} 
);

jQuery的整個集合，由此易於通過簡單地接受元素的集合並在後臺它然後遍歷並將事件處理程序附加到每個單個元素。

$("element").on("type(s)",function(){/* code */})

或更容易

$("element").<type>(function(){/* code */})

*一個迭代符功能已經被添加的NodeLists不是很久以前，仍然不具備全球性的支持。

來源

2017-04-19 15:53:59 Christoph

感謝您的詳細解釋。這就是我一直在尋找的！ :) – Serge

性能如何，是第一個版本更好？ – Serge

我沒有看到代碼，所以我不能100％確定，但我會說可以忽略的差異。在這兩種情況下，您都會對輸入集合進行一次迭代，只是順序稍有不同。 – Christoph

的主要區別是，jQuery的使用.each()函數可以訪問正在迭代的元素的索引並讓您執行一個函數，但在您的情況下沒有函數因此您應該使用語法更易於編寫/讀取的第一個版本。

來源

2017-04-19 15:35:04 Hulothe

jQuery：我需要每個「點擊」項目的「每個」？

回答

相關問題