Question

我正在尝试找到与被点击元素最接近的元素的索引。我的函数用于查找单击了哪个按钮，但我需要查找父元素的索引。

问题不是我的所有父元素都包含这个按钮。到目前为止，这是我的代码：

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。

Answer 1

我不确定。此实现是否满足要求。

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>

Answer 2

我以另一种方式解决了这个问题。

我像 <div class="check-parent"> 一样将数据索引添加到 <div class="check-parent" data-index="0"> 中，然后我使用 checkC.closest(".check-parent").getAttribute("data-index"); 来获取父项的索引。

感谢您的建议！

单击查找父元素的索引（未单击的元素）

2 个答案: