Question

我已向家长#carousel-thumbs。

添加了点击事件

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>

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

，我会得到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);
}

对Javascript一无所知我认为必须有一种更简单的方法，但也许不是。

Answer 1

试试这个（也读：What is DOM Event delegation?）：

carouselThumbsContainer.onclick = function (e) {
    var tgt = e.target, i = 0, items;
    if (tgt === this) return;
    items = children(this);
    while (tgt.parentNode !== this) tgt = tgt.parentNode;
    while (items[i] !== tgt) i++;
    alert(i);
};

function children(el) {
    var i = 0, children = [], child;
    while (child = el.childNodes[i++]) {
        if (child.nodeType === 1) children.push(child);
    }
    return children;
}

以下是演示：http://jsfiddle.net/wared/U7Xpc/。

逐行处理点击处理程序

演员

var tgt = e.target, i = 0, items; // and `this`

this是UL本身。 e.target是发起事件的DOM元素。它可以是UL或UL本身的任何后代（在本例中为e.target = this）。 i保存所点击项目的索引。 items代表作为UL直接子女的LI。

故事

如果目标是UL本身，则退出该功能：

if (tgt === this) return;

获得UL直接子女的LI：

items = children(this);

向目标的祖先冒泡，直到达到最高的LI：

while (tgt.parentNode !== this) tgt = tgt.parentNode;

增加索引，直到目标与其中一个LI匹配：

while (items[i] !== tgt) i++;

提醒索引：

alert(i);

Answer 2

您可以重新调整数组indexOf函数并在父级子项中查找目标索引：

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

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

或者只使用for循环并迭代children。

演示：http://jsfiddle.net/SFke7/2/

Answer 3

适用于IE＆gt; = 9

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

您可以在此处查看：http://jsfiddle.net/mBg98/

Javascript在点击时获得孩子的索引

3 个答案:

逐行处理点击处理程序

演员

故事