Javascript在点击时获取 child 的索引

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;
}

这是一个演示:

var hit = false,
    ul = document.getElementsByTagName('ul')[0],
    addButton = document.getElementsByTagName('a')[0],
    toggleButton = document.getElementsByTagName('a')[1],
    active = null;

ul.onclick = function (e) {
    var i = 0, tgt = e.target, items;
    if (tgt === this) return;
    items = children(ul);
    while (tgt.parentNode !== this) tgt = tgt.parentNode;
    while (items[i] !== tgt) i++;
    hit = true; // for debug purposes only
    if (active) active.className = '';
    (active = tgt).className = 'active';
    output('index : ' + i);
};

addButton.onclick = function () {
    var li = document.createElement('li'),
        n = children(ul).length + 1;
    li.innerHTML = '<a href="#">item ' + n + '</a>';
    li.innerHTML += '<ul><li><a href="#">sub item</a></li></ul>';
    ul.appendChild(li);
    hit = true;
};

toggleButton.onclick = function () {
    ul.className = ul.className ? '' : 'sublists';
    hit = true;
};

document.onclick = function (e) {
    e.preventDefault();
    if (hit) hit = false;
    else output('index : none');
};

// populate the UL

var i = 0;
while (i++ < 5) addButton.onclick();
hit = false;

// helpers

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

function output(s) {
    document.getElementsByTagName('span')[0].innerHTML = s;
}

body { font-family: Arial; }
div { width: 210px; padding-left: .5em; }
p a { float: right; color: blue; margin-left: .5em; }
ul { border: 1px solid black; padding: 1em 1em 1em 2.5em; }
ul ul { display: none; }
ul.sublists ul { display: block; }
li a { display: block; color: inherit; text-decoration: none; }
li a { border-right: 90px solid transparent; }
li a:hover { border-right-color: blue; }
li.active a { border-right-color: black; }
li li a { border-right-width: 18px; }

<div>
    <p>
        <a href="#" title="add a new item">add</a>
        <a href="#" title="toggle sub lists">toggle</a>
        <span><i>click any item</i></span>
    </p>
    <ul></ul>
</div>

---

逐行点击处理程序

Actor

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

this 是 UL 本身。 e.target 是发起事件的 DOM 元素。它可以是 UL 的任何后代或 UL 本身(在这种情况下 e.target = this)。 i 保存被点击项目的索引。 items 代表 LI，它们是 UL 的直接子级。

故事

如果目标是 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);