如何遍历通过jQuery动态添加至DOM中的元素？

我懂你遇到的这个坑——$(document).ready()执行的时候，那些动态添加的.item元素还没被塞进DOM里呢！所以你用$('.item').each()根本找不到它们，自然出不来a、b、c。

给你几个实用的解决方案，按需选就行：

方案一：元素添加完成后立刻遍历（最直接） #

这是最简单的办法，既然元素是你用JS动态加的，那就在添加操作完成之后马上执行遍历。比如你是用append或者html()来插入元素的，代码可以这么写：

// 先完成动态元素的添加
$('.container').append(`
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
`);

// 元素已经在DOM里了，现在遍历没问题
$('.item').each(function(index, elem) {
    console.log($(elem).text()); // 输出a、b、c
});

这个方法的核心就是确保遍历动作晚于元素插入DOM的动作，完美规避时机问题。

方案二：用MutationObserver监听DOM变化（适合异步场景） #

如果你的动态元素是通过异步请求（比如AJAX）返回后才添加的，没法提前确定添加时机，那可以用MutationObserver来监听.container的变化，一旦有新的.item被加进来，就触发遍历：

$(document).ready(function() {
    // 找到要监听的容器
    const container = document.querySelector('.container');
    
    // 配置监听规则：监听子元素的添加/移除
    const observerConfig = { childList: true, subtree: true };
    
    // 监听回调
    const onDomChange = function(mutations) {
        // 每次DOM变化后，重新获取所有.item元素
        const items = document.querySelectorAll('.item');
        if (items.length) {
            items.forEach(item => {
                console.log(item.textContent);
            });
            // 如果只需要遍历一次，这里可以调用 observer.disconnect() 停止监听
        }
    };
    
    // 创建并启动观察者
    const observer = new MutationObserver(onDomChange);
    observer.observe(container, observerConfig);
});

这个方法能自动捕捉DOM的更新，不用操心元素什么时候被添加。

方案三：区分「事件绑定」和「元素遍历」 #

你提到用$(document).on()绑定动态元素的事件，这是事件委托的思路——它不需要元素提前存在，因为事件是绑定在父元素（这里是document）上的。但遍历是要直接操作元素本身，所以两者逻辑不一样：
如果你既要绑定事件，又要遍历元素，可以结合事件委托和方案一：

// 先绑定事件委托，处理动态元素的点击（示例）
$(document).on('click', '.item', function() {
    alert('你点击了：' + $(this).text());
});

// 动态添加元素后立刻遍历
$('.container').append('<div class="item">a</div><div class="item">b</div><div class="item">c</div>');
$('.item').each(function() {
    console.log('遍历到：' + $(this).text());
});

总结一下：问题的本质就是遍历执行时目标元素还没存在于DOM中，所以只要保证遍历动作在元素插入之后执行，或者用DOM监听来触发遍历，就能解决问题啦！

内容的提问来源于stack exchange，提问作者Sylar