JavaScript - обнаружить индекс элемента, щелкнул в Nodelist

Question

Я Создал NodeList пути получения HTML-элементов с общей Classname по:

> var btn = document.getElementsbyClassName("btn") 

Это HTML код:

<div id="main"> 
    <div class="btn"> 
    </div> 
    <div class="btn"> 
    </div> 
    <div class="btn"> 
    </div> 
    <div class="btn"> 
    </div> 
</div> 

Таким образом, эти конкретный объект NodeList имеет длину 4.

Теперь я хочу вызвать функцию при щелчке одного из этих элементов. Я совершаю, что при использовании для цикла:

for(var i = 0; i < btn.length ; i++) { 
    btn[i].onclick = doSomething; 
}; 

function doSomething() { 
    // here come some code. 
}; 

Но как я могу получить индекс NodeList, на котором было уволены те события? И как я могу назначить уникальные имена для каждого из элементов массива?

Answer 1

Вы можете включить его в подписи функции:

for(var i = 0; i < btn.length ; i++) { 
    btn[i].onclick = doSomething(i); 
}; 

function doSomething(i) { 
    return function() { 
     btn[1].innerHTML = i; 
    } 
}; 

Answer 2

Вот что я хотел бы сделать:

var btn = document.getElementById('main').getElementsByTagName('div'); 
for(var i = 0; i < btn.length ; i++) { 
    btn[i].id = "btn"+i; 
    if(btn[i].className=="btn") 
     btn[i].onclick = doSomething; 
}; 

function doSomething() { 
    var num = this.id.substr(3); 
    alert("Div " + num + " clicked"); 
}; 

(я вынул getElementsByClassName(), чтобы сделать его кросс-браузер, который имеет. предполагая, что вы не реализовали свое собственное переопределение для метода, чтобы сделать его перекрестным браузером).

Edit: Для вашего innerHTML вопрос, проверьте прилагаемую скрипку, чтобы он работал отлично: http://jsfiddle.net/TdCD8/