javascript 如何在父div中获取div的索引？

olhwl3o2 于 2023-06-20 发布在 Java

关注(0)|答案(2)|浏览(117)

有什么方法可以得到父div中点击div的索引吗？
下面是一个例子：

<div class="parent">
    <div id="1" class="child"></div>
    <div id="2" class="child"></div>
    <div id="3" class="child"></div>
    <div id="4" class="child"></div>
</div>

<script>
    var parent = document.getElementsByClassName("parent");
    var child = document.getElementsByClassName("child");

    for(var i=0; i < parent.length; i++){
        parent[i].addEventListener("click", function(e){
            console.log(e.target)
            console.log(e.target.parentNode)
        });
    }
</script>

我的意思是，有没有什么方法可以得到点击div的索引？例如，如果我单击id为“1”的div，它将在控制台中打印“0”，因为它的索引为0。如果我单击id为“2”的div，它将在控制台中打印“1”，因为它的索引是1，依此类推。
有什么办法可以做到这一点吗？（不使用属性）

JavaScript

来源：https://stackoverflow.com/questions/66771371/how-to-get-index-of-div-in-parent-div

2条答案

按热度按时间

klh5stk11#

使用Array.prototype.indexOf()查找parent.children中的子对象

var child = document.getElementById('findme');
var parent = child.parentNode;

var index = Array.prototype.indexOf.call(parent.children, child);
console.log(index);

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

使用ES6 Array.prototype.findIndex();

var child = document.getElementById('findme');
var parent = child.parentNode;

var index = Array.prototype.findIndex.call(parent.children, (c) => c === child);
console.log(index);

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

但是，这可能会在IE上给予一些问题。

赞(0）回复(0）举报 2023-06-20

v6ylcynt2#

在ES6中：你也可以像下面这样做

var child = document.getElementById('findme');
var parent = child.parentNode;

const index = Array.from(parent.children).indexOf(child)

var child = document.getElementById('findme');
var parent = child.parentNode;

const index = Array.from(parent.children).indexOf(child);
console.log("finded index is ", index);

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 如何在父div中获取div的索引？

2条答案

相关问题

热门标签

最新问答