如何知道该课程中的哪个索引被点击

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

感谢。如何从此返回ID？ - 句法7分钟前

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

Answer 2

jQuery中： $（ “＃B1”）的.index（）

编辑：刚才看到你的更新，你可以这样做在了jQuery按钮按下指数

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

Answer 3

你也许会想这是由var nodes = document.querySelectorAll('.class_name')然后例如可以做nodes.length和console(nodes[1].id)返回NodeList的。

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

的NodeLists总是顺序，但如果你重新排列元素，你会必须再次查询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>