我正在尝试找到与被点击元素最接近的元素的索引。我的函数用于查找单击了哪个按钮,但我需要查找父元素的索引。
问题不是我的所有父元素都包含这个按钮。到目前为止,这是我的代码:
var clickCheck = document.querySelectorAll(".click-check");
Array.prototype.forEach.call(clickCheck, function (checkC, index) {
checkC.addEventListener('click', function () {
console.log("Clicked button " + index);
checkC.closest(".check-parent");
})
});
.check-parent {
background-color: #EC008C;
color: #FFF;
padding: 10px 20px;
margin: 10px 0px;
}
.click-check {
width: 200px;
background-color: #000;
padding: 5px 20px;
}
<div class="check-parent">
<div class="element">
<div class="click-check">Klik hier</div>
</div>
</div>
<div class="check-parent">
<div class="element">
</div>
</div>
<div class="check-parent">
<div class="element">
<div class="click-check">Klik hier</div>
</div>
</div>
这里的问题是,当第二个具有 check-parent
类的父元素不包含按钮时,它的索引被跳过。我想我可以使用这部分 checkC.closest(".check-parent");
来查找像 nodeList 一样的东西,然后找到长度之类的?
当我单击第二个按钮(在第三个父项中)时,控制台记录索引 1(这是合乎逻辑的)。如何在此处找到父元素的索引?所以我希望它显示索引 2 而不是索引 1。
答案 0 :(得分:0)
我不确定。此实现是否满足要求。
var clickCheck = document.querySelectorAll(".click-check");
Array.prototype.forEach.call(clickCheck, function (checkC, index) {
checkC.addEventListener('click', function () {
console.log("Clicked button " + checkC.closest(".check-parent").getAttribute("data-index"));
;
})
});
.check-parent {
background-color: #EC008C;
color: #FFF;
padding: 10px 20px;
margin: 10px 0px;
}
.click-check {
width: 200px;
background-color: #000;
padding: 5px 20px;
}
<div>
<div class="check-parent" data-index="0">
<div class="element">
<div class="click-check">Klik hier</div>
</div>
</div>
<div class="check-parent" data-index="1">
<div class="element">
</div>
</div>
<div class="check-parent" data-index="2">
<div class="element">
<div class="click-check">Klik hier</div>
</div>
</div>
</div>
答案 1 :(得分:0)
我以另一种方式解决了这个问题。
我像 <div class="check-parent">
一样将数据索引添加到 <div class="check-parent" data-index="0">
中,然后我使用 checkC.closest(".check-parent").getAttribute("data-index");
来获取父项的索引。
感谢您的建议!