Question

我正在使用JavaScript。我创建了一个在单击文档中的特定元素时调用的函数。点击该元素我想返回其父元素的索引。

以下是我的代码

var fbEl = document.getElementsByClassName("_42nr");
var fbPost = document.getElementsByClassName("_5jmm _5pat _3lb4 s_1qgkos469b");
var fbPostUrl = document.getElementsByClassName("_5pb8 _8o _8s lfloat _ohe");

var h = '<a href="" ><div style="float:left;font-weight:bold;cursor:pointer;height:14px;color:#4b4f56;" class="myprivateLikeButton"><img src="http://bitbaysolutions.com/Icons/icon_like.png" style="width:17px;height:17px;margin-right:7px;float:left;margin-top:-4px;">Private Like</div></a>';

for (var i = 0; i < fbEl.length ; i++) {
    if((fbEl[i].children.length<=3) && !(fbEl[i].firstChild.innerText.toLowerCase()=="private like")){
        fbEl[i].insertAdjacentHTML('afterbegin',h);
    }
}

document.addEventListener("click",function(e){
    var ev = e.target; 
    if(ev.innerText=="Private Like"){

        var liked = "http://bitbaysolutions.com/Icons/icon_liked.png";
        ev.firstChild.setAttribute("src",liked) ;
        ev.style.color="#e20505";


        alert(fbEl.indexOf(ev.parentElement.parentElement));

    };
});

ev返回单击的元素。并且ev.parentElement.parentElement返回被单击的特定子元素的父元素。有许多元素具有相同的类。所以我想获得该特定子父级的索引。我的方法不起作用，我已经证明了这一点。我需要在javascript中完成此操作。

Answer 1

由于您可以获得 parentElement ，因此您可以使用类选择器获取相应父元素的索引。

以下是一个示例代码段。

var idx =$(".your_class").index($(ev.parentElement.parentElement));

如果您想纯粹在JavaScript中实现这一点，那么您可以遵循以下逻辑：

var allElems = document.getElementsByClassName("your_class_name");
var index=-1;
for(var i=0;i<allElems.length;i++){
    if(allElems[i]===ev.parentElement.parentElement){
         index=i;
         break;
    }
}

现在你将拥有父元素的索引。

Answer 2

以下是如何获取父元素的索引：

Html结构：

<ul>
  <li><a href="#">btn 1</a></li>
  <li><a href="#">btn 2</a></li>
  <li><a href="#">btn 3</a></li>
  <li><a href="#">btn 4</a></li>
  <li><a href="#">btn 5</a></li>
</ul>

Vanilla JavaScript：

let links = Array.from(document.querySelectorAll('ul > li > a'));
let parentElements = Array.from(document.querySelectorAll('ul > li'));

links.forEach(link => {
    link.addEventListener('click', e => {
        let index = parentElements.indexOf(e.target.parentElement);
        console.log(index);
    });
});

此处 DEMO

Answer 3

使用此

alert($("a").index($(ev).parents("a")))

如何查找特定元素的索引？

3 个答案: