Как узнать, какой индекс в классе нажат

Question

Глядя на это link, я думал, что классы фактически индексируются. Если у меня есть этот код, как я могу получить в JavaScript или jQuery индекс класса нажатой кнопки?

<button class="class_name" id="b1"></button> 
<button class="class_name" id="b2"></button> 

Answer 1

DEMO: http://jsfiddle.net/mg7zau4c/

JQuery index

Поиск заданного элемента из числа элементов.

$('.class_name').on('click', function(){ 
    console.log($(this).index()); 
}); 

Спасибо. Как вернуть идентификатор из этого? - Синтаксические 7 минут назад

$(this).attr('id'); 

Answer 2

в JQuery: $ ("# b1") .index()

EDIT: только что видел ваши обновления, вы можете сделать это в JQuery кнопке щелкнул индекс

$('button').click(function (event) { 
    alert($(this).index()); 
}); 

Answer 3

Вы можете думать о NodeList, который возвращается по var nodes = document.querySelectorAll('.class_name'), который затем может сделать nodes.length и console(nodes[1].id), например.

see MDN

Answer 4

Без JQuery:

var index, 
    buttons = document.getElementsByClassName('class_name'); 
for(var i=0;i<buttons.length;i++){ 
    buttons[i].onclick = function(){ 
     for(var j=0;<buttons.length;j++){ 
      if(buttons[j]==this) { 
       index = j; //console.log(j), etc 
       break; 
      } 
     } 
    } 
} 

С одной меньше фигурной скобкой и fiddle:

[].slice.call(document.getElementsByClassName('class_name')).forEach(function(o,i,arr){ 
    o.onclick = function(){ 
     var index, that = this; 
     var search = arr.some(function(b,j){ 
      index = j; 
      return that == b; 
     }); 
     alert(index); 
    } 
}); 

нодлистов всегда будут в порядке, но если вы реорганизовать элементы, которые вы будете необходимо снова запросить getElementsByClassName.

Answer 5

Вы можете использовать это, чтобы перебирать через них элемент, содержащий кнопки. Предполагая, что единственные дети - это кнопки, о которых идет речь, вы можете получить такой индекс.

document.getElementById('buttonContainer').addEventListener('click', function(e) { 
 
    var clickedButton = e.target, 
 
     index = -1; 
 
    [].slice.call(this.children).some(function(el, idx) { 
 
    if (e.target === el) { 
 
     index = idx; 
 
     return true; 
 
    } 
 
    return false; 
 
    }); 
 
    document.getElementById('indexText').textContent = index + ' ' + e.target.id; 
 
});

<div id="buttonContainer"> 
 
<button class="class_name" id="red"></button> 
 
<button class="class_name" id="blue"></button> 
 
<button class="class_name" id="purple"></button> 
 
<button class="class_name" id="magenta"></button> 
 
<button class="class_name" id="rouge"></button> 
 
<button class="class_name" id="cyan"></button> 
 
<button class="class_name" id="yellow"></button> 
 
<button class="class_name" id="black"></button> 
 
    </div> 
 
<p id="indexText"></p>