Javascript Vanilla JS：如何获取某个类的父元素索引？

简而言之：

在给定HTML中单击下面的链接时，我需要使用类“analytics”获取父级的索引。例如，单击链接“myID2 link 1”将返回1

<ul id="myID1" class="analytics" data-attribute="hpg:shocking">
  <li><a href="http://myurl.com/">myID1 Link 1</a></li>
  <li><a href="http://myurl.com/">myID1 Link 2</a></li>
  <li><a href="http://myurl.com/">myID1 Link 3</a></li>
</ul>
<ul id="myID2" class="analytics" data-attribute="hpg:expected">
  <li><a href="http://myurl.com/">myID2 Link 1</a></li>
  <li><a href="http://myurl.com/">myID2 Link 2</a></li>
  <li><a href="http://myurl.com/">myID2 Link 3</a></li>
</ul>
<ul id="myID3" class="analytics" data-attribute="hpg:unexpected">
  <li><a href="http://myurl.com/">myID3 Link 1</a></li>
  <li><a href="http://myurl.com/">myID3 Link 2</a></li>
  <li><a href="http://myurl.com/">myID3 Link 3</a></li>
</ul>

我所尝试的：

我目前正在使用两个独立的循环，一个用于遍历父循环，另一个用于向链接添加单击事件

// helper function to check parent for a class
function hasParentWithClass(element, classname) {
  if (element.className.split(' ').indexOf(classname) >= 0) {
    return true;
  }
  return element.parentNode && hasParentWithClass(element.parentNode, classname);
}

// get all elements with class "analytics"
var analytics = document.querySelectorAll('.analytics');
var containerClass = [];

for (var z = 0; z < analytics.length; z++) {
  var inc = z + 1;
  containerClass.push(analytics[z].getAttribute('id'));
}

var links = analytics.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(e) {
    e.preventDefault();

    if (hasParentWithClass(this, 'analytics')) {
    // output index of parent
    } else {
    // do nothing
    }
  }, false);
}

//检查类的父类的helper函数
函数hasParentWithClass（元素，类名）{
if（element.className.split（“”）.indexOf（className）>=0）{
返回true；
}
返回element.parentNode&&hasParentWithClass（element.parentNode，classname）；
}
//使用类“analytics”获取所有元素
var analytics=document.querySelectorAll（“.analytics”）；
var containerClass=[]；
对于（var z=0；z

问题：

我正在努力使用第二个循环中第一个循环的逻辑。具体地说，从第二个for循环中搜索var containerClass以获取父级的索引，因为它存储在var containerClass中。indexOf对我没什么好处

---

实现这一点最直接、最有效的方法是什么？

这比你想象的要简单得多。如果我们将click事件处理程序分配给父元素，我们可以使用事件冒泡来解决这个问题。单击链接时，它不仅会触发所单击链接的

click

事件，而且该事件还会在该链接的祖先元素中“冒泡”。如果我们在父级捕获事件，就可以得到它的索引

此外，正如@Dave Thomas指出的，列表的HTML结构无效

//获取所有的.analytics元素
var analytics=document.querySelectorAll（“.analytics”）；
//循环通过它们
Array.prototype.slice.call（分析）.forEach（函数（项、索引、arry）{
//为每个父级设置单击事件处理程序
item.addEventListener（“单击”，函数（evt）{
//只需访问组中父级的索引即可
console.clear（）；
log（“父级的索引为：”+index）
//现在，在其父.analytics元素中显示链接的索引
//获取当前分析容器中的所有锚点
var anchors=Array.prototype.slice.call（item.querySelectorAll（“a”））；
//获取锚点集中锚点的索引
var idx=Array.prototype.indexOf.call（anchors，evt.target）；
log（“父级中链接的索引为：“+idx”）；
});
});
















这比你想象的要简单得多。如果我们将click事件处理程序分配给父元素，我们可以使用事件冒泡来解决这个问题。单击链接时，它不仅会触发所单击链接的
click
事件，而且该事件还会在该链接的祖先元素中“冒泡”。如果我们在父级捕获事件，就可以得到它的索引

此外，正如@Dave Thomas指出的，列表的HTML结构无效


//获取所有的.analytics元素
var analytics=document.querySelectorAll（“.analytics”）；
//循环通过它们
Array.prototype.slice.call（分析）.forEach（函数（项、索引、arry）{
//为每个父级设置单击事件处理程序
item.addEventListener（“单击”，函数（evt）{
//只需访问组中父级的索引即可
console.clear（）；
log（“父级的索引为：”+index）
//现在，在其父.analytics元素中显示链接的索引
//获取当前分析容器中的所有锚点
var anchors=Array.prototype.slice.call（item.querySelectorAll（“a”））；
//获取锚点集中锚点的索引
var idx=Array.prototype.indexOf.call（anchors，evt.target）；
log（“父级中链接的索引为：“+idx”）；
});
});
















这里是另一种方式：

document.querySelectorAll('li').forEach((item) => {
    item.addEventListener('click', (e) => {
        const index = Array.from(item.parentNode.children).indexOf((item))
        console.log(index);
    })
})

还有一种方法：

document.querySelectorAll('li').forEach((item) => {
    item.addEventListener('click', (e) => {
        const index = Array.from(item.parentNode.children).indexOf((item))
        console.log(index);
    })
})

您的HTML无效，
元素唯一允许的父元素是
或
元素；如果您有一个祖先
，或者
，元素，那么它们不能包含
元素（除非
被包装在
中）。我很抱歉，感谢您的呼叫。HTML现在具有正确的语义。您的HTML无效，
元素唯一允许的父元素是
或
元素；如果您有一个祖先
，或者
，元素，那么它们不能包含
元素（除非
被包装在
中）。我很抱歉，感谢您的呼叫。HTML现在具有适当的语义