个人中心
gpt4 book ai didi

javascript - 如何获取动态div的索引值

转载 作者：行者123 更新时间：2023-12-05 05:34:43 28 4
gpt4 key购买 nike

我在“父”div 下创建了一些动态 div，并在这些动态 div 中设置从 json 获取的数据。现在我想使用 onclick 函数来获取将被单击的这些动态 div 的索引值。但不知道该怎么做。

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);

    })
}
<body>
    <div id="parent">
        <img src="" alt="">
    </div>
    <script src="country.js"></script>
</body>

最佳答案

您可以通过获取元素集合来获取 html 元素相对于父元素的索引，convert it to an array, and then get the index in the usual way使用 native 数组 indexOf 方法:

function getIndex(div) {
    const parent = document.getElementById("parent");
    const collection = Array.from(parent.querySelectorAll(".list"));
    const index = collection.indexOf(div);
    return index;
}

您可以使用 event delegation to automatically assign a click handler在所有 .list 元素被创建时

const parent = document.getElementById("parent");
parent.addEventListener('click', function (event) {
    const item = event.target;
    if (item.matches(".list")) {
        console.log("index: ", getIndex(item));
    }
});
fetch(//...

例子:

const parent = document.getElementById("parent");

function getIndex(div) {
    const collection = Array.from(parent.querySelectorAll(".list"));
    const index = collection.indexOf(div);
    return index;
}

parent.addEventListener('click', function (event) {
    const item = event.target;
    if (item.matches(".list")) {
        console.log("index: ", getIndex(item));
    }
});

parent.innerHTML = `
<div class="list">A</div>
<div class="list">B</div>
<div class="list">C</div>
<div class="list">D</div>
`;
<div id="parent"></div>

关于javascript - 如何获取动态div的索引值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73628405/

28 4 0
文章推荐： java - 使用java文件创建约束布局
文章推荐： c++ - Regex根据编译器替换不同的输出
文章推荐： r - 如何摆脱错误 : Tibble columns must have compatible sizes?
文章推荐： python - 链接桶的最佳组合
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com