jQuery 為陣列元素綁定事件：正確使用 each() 避免閉包陷阱

問題代碼分析

var dl = $('.smcom_topNav').children('dl');
for (var i = 0; i < dl.length; i++) {
    $(dl[i]).bind('mouseover', function() {
        $(dl[i]).children('dd').show(); // 錯誤：i 為迴圈結束後的值
    });
}

經典閉包陷阱：事件處理函式捕獲的是變數 i 的引用，而非當下的值。迴圈結束時 i === dl.length，導致所有事件指向同一個（不存在的）索引。

正確解法：使用 jQuery.each()

$('.smcom_topNav').children('dl').each(function(index, element) {
    var $dl = $(element);
    $dl.on('mouseenter', function() {
        $dl.children('dd').show();
    }).on('mouseleave', function() {
        $dl.children('dd').hide();
    });
});

• each() 為每個元素建立獨立作用域，element 參數直接指向當前 DOM，避免索引變數污染。
• 使用 mouseenter/mouseleave 替代 mouseover/mouseout，避免冒泡導致的閃爍。
• 鏈式呼叫 .on() 簡潔綁定多事件。

進階：事件委派（動態元素適用）

$('.smcom_topNav').on('mouseenter', 'dl', function() {
    $(this).children('dd').show();
}).on('mouseleave', 'dl', function() {
    $(this).children('dd').hide();
});

將事件綁定在父容器，利用冒泡機制處理子元素，效能更佳且支援動態新增的 dl。

參考資源

更多陣列操作技巧請見：jQuery 陣列 each/grep/inArray 詳解