Javascript在单击时获取子对象的索引

我在家长旋转拇指中添加了一个点击事件

carouselThumbsContainer.onclick = function(ev) {
    var target = ev.target;    // which child was actually clicked
}

<ul id="carousel-thumbs" class="l-grid">
    <li class="active"><a class="active" href="#"><img src="img/carousel-1-th.jpg" /></a></li>
    <li><a href="#"><img src="img/carousel-2-th.jpg" /></a></li>
    <li><a href="#"><img src="img/carousel-3-th.jpg" /></a></li>
    <li><a href="#"><img src="img/carousel-4-th.jpg" /></a></li>
</ul>

carouselThumbsContainer.onclick=函数（ev）{
var target=ev.target；//实际单击了哪个子级
}

我想返回单击元素相对于其父元素的索引。因此，如果用户单击第二个

，我将得到1

/////////////////////////////////////////// 目前的解决方案有效，但我希望简化：

    //Add a click event to each thumn in the thumbs container
for (var j = 0, len = carouselThumbsContainer.children.length; j < len; j++){
    (function(index){
        carouselThumbsContainer.children[j].onclick = function(){
              console.log(index);
        }    
    })(j);
}

//为thumbs容器中的每个thumn添加一个单击事件
对于（var j=0，len=carouselThumbsContainer.children.length；j

---

我对Javascript一无所知，我想一定有更简单的方法，但也许没有。

您可以重新调整数组indexOf函数的用途，并在父对象的子对象中找到目标的索引：

var el = e.target;
while (el.tagName.toLowerCase() != "li") {
    el = el.parentNode;
}

[].indexOf.call(el.parentNode.children, el);

或者只需使用for循环并在

子项上迭代即可

演示：
试试这个（另请阅读：）：

下面是一个演示：


var hit=false，
ul=document.getElementsByTagName（'ul'）[0]，
addButton=document.getElementsByTagName（'a'）[0]，
toggleButton=document.getElementsByTagName（'a'）[1]，
active=null；
ul.onclick=功能（e）{
变量i=0，tgt=e.目标，项目；
如果（tgt==此）返回；
项目=儿童（ul）；
而（tgt.parentNode！==this）tgt=tgt.parentNode；
而（items[i]！==tgt）i++；
hit=true；//仅用于调试目的
如果（活动）活动。类名称=“”；
（active=tgt）.className='active'；
输出（'索引：'+i）；
};
addButton.onclick=函数（）{
var li=document.createElement（'li'），
n=儿童（ul）。长度+1；
li.innerHTML=''；
li.innerHTML+='
'；
ul.儿童（li）；
命中=真；
};
toggleButton.onclick=函数（）{
ul.className=ul.className？“”：“子列表”；
命中=真；
};
document.onclick=函数（e）{
e、 预防默认值（）；
如果（命中）命中=错误；
else输出（“索引：无”）；
};
//填充UL
var i=0；
而（i++<5）addButton.onclick（）；
命中=错误；
//助手
功能儿童（el）{
变量i=0，子变量=[]，子变量；
while（child=el.childNodes[i++]{
if（child.nodeType==1）children.push（child）；
}
返回儿童；
}
功能输出{
document.getElementsByTagName（'span'）[0].innerHTML=s；
}
body{font-family:Arial；}
div{width:210px；左侧填充：.5em；}
PA{浮点：右；颜色：蓝色；左边距：.5em；}
ul{边框：1px纯黑色；填充：1em 1em 1em 2.5em；}
ul{显示：无；}
ul.sublists ul{display:block；}
LIA{显示：块；颜色：继承；文本装饰：无；}
LIA{右边框：90px实心透明；}
li a:悬停{右边框颜色：蓝色；}
li.active a{右边框颜色：黑色；}
li li a{边框右宽度：18px；}


单击任何项目


适用于IE>=9

var index = Array.prototype.indexOf.call(this.children, ev.target);

您可以在这里看到它的作用：
您所单击的子项的索引是什么意思？你是说它的子位置？i、 e.第一个孩子、第二个孩子等？是的，它的孩子位置。父项是一个
，我想返回被点击的
的索引。当我插入时总是得到零这是：carouselThumbsContainer.onclick=function（e）{//var target=ev.target；//哪个子项实际被点击了警报（[].indexOf.call（e.target.parentNode.children，e.target））；}是的，在你发布代码后我才意识到。您需要遍历树以获取
li
，然后将其与其父级进行比较。否则，您将得到
元素的索引，该索引将始终为零，因为它是该级别的唯一元素。如果您愿意提供一个非常棒的示例，我对Javascript非常陌生。就在这里。如何指定特定ID的ul？小提琴手正在看页面上的第一个ul实例。在Jquery中，我会寻找id为的ul，不知道如何在Javascript中链接它。@JacobLauritzen很高兴知道。应该提到我需要对IE7+的支持。我有一个可行的解决方案，但我一直在寻找更优雅的解决方案。将在上面发布我的原始解决方案。感谢所有的帮助。拍摄，需要支持IE7+您可以将此添加到您的代码中，以使indexOf在IE中工作：但是对于这样一个简单的任务来说，这可能有点过分了
var index = Array.prototype.indexOf.call(this.children, ev.target);