如何获取动态创建的div元素的点击索引值

有两种实用方法可以实现这个需求：

方法一：循环绑定索引 #

利用forEach的第二个参数（当前项的索引），直接给每个动态创建的div绑定点击事件，把索引传递进去：

修改后的JS代码：

fetch('https://restcountries.com/v3.1/all')
    .then(response => response.json())
    .then(json => display(json));

function display(datas) {
    let parent = document.getElementById("parent");
    // forEach第二个参数为当前元素的索引
    datas.forEach((data, index) => {
        let div = document.createElement('div');
        div.classList.add('list');

        div.innerHTML = ` 
        <li>country Name: ${data.name.common}</li>
        <li>country Continents: ${data.continents[0]}</li>
        <li>Total arae: ${data.area}</li>
        <img src="${data.flags.png}" alt="" style="display: none">`

        // 绑定点击事件，直接传入当前索引
        div.onclick = () => {
            console.log('点击的索引：', index);
            // 这里可添加你需要的后续操作
        }

        parent.appendChild(div);
    })
}

方法二：事件委托（适合大量元素场景） #

给父元素#parent绑定单个点击事件，通过事件冒泡定位被点击的.list元素，再计算它的索引。这种方法无需给每个div单独绑定事件，性能更优：

修改后的JS代码：

fetch('https://restcountries.com/v3.1/all')
    .then(response => response.json())
    .then(json => display(json));

function display(datas) {
    let parent = document.getElementById("parent");
    datas.forEach(data => {
        let div = document.createElement('div');
        div.classList.add('list');

        div.innerHTML = ` 
        <li>country Name: ${data.name.common}</li>
        <li>country Continents: ${data.continents[0]}</li>
        <li>Total arae: ${data.area}</li>
        <img src="${data.flags.png}" alt="" style="display: none">`

        parent.appendChild(div);
    })

    // 父元素绑定事件委托
    parent.addEventListener('click', function(e) {
        // 定位被点击的.list元素（兼容点击子元素的情况）
        const targetDiv = e.target.closest('.list');
        if (targetDiv) {
            // 将所有.list元素转为数组，获取当前div的索引
            const allItems = Array.from(this.querySelectorAll('.list'));
            const index = allItems.indexOf(targetDiv);
            console.log('点击的索引：', index);
            // 这里可添加你需要的后续操作
        }
    })
}

两种方法对比：

• 方法一简单直接，适合元素数量不多的场景；
• 方法二更高效，尤其在动态生成大量元素时，能避免冗余的事件绑定。

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