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

Question

I'm trying to find the index of the.closest element to the clicked element. My function works to find which button is clicked, but I need to find the index of the parent element.

The problem is not all of my parent elements contain this button. This is my code so far:

 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>

The problem here is that when the second parent element with class check-parent doesn't contain the button, it's index is skipped. I'm thinking I can use this part checkC.closest(".check-parent"); to maybe find like a nodeList and then find the length or something?

When I click the second button (in third parent) the console logs index 1 (which is logical). How do I find the index of the parent element here? So i want it to show index 2 instead of index 1.

Answer 1

I am not sure. Is this implementation fulfill the requirement.

 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

I fixed this issue another way.

I added data-index to <div class="check-parent"> like <div class="check-parent" data-index="0"> and then I used checkC.closest(".check-parent").getAttribute("data-index"); to gain the index of the parent.

Thanks for your suggestions!