如何知道單擊類中的哪個索引

Question

看着這個鏈接 ，我當時在想實際上是在索引類。 如果有此代碼，如何在JavaScript或jQuery中獲取所單擊按鈕的類的索引？

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

Answer 1

在jquery中：$（“＃b1”）.index（）

編輯：剛剛看到您的更新，您可以在jquery中執行此操作以單擊按鈕的索引

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

Answer 2

演示 ： http : //jsfiddle.net/mg7zau4c/

jQuery 索引

從匹配的元素中搜索給定的元素。

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

謝謝。 如何從中返回ID？ –句法7分鍾前

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

Answer 3

您可能會想到一個由var nodes = document.querySelectorAll('.class_name')返回的NodeList ，然后可以執行nodes.length和console(nodes[1].id) 。

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

少一個花括號，並擺弄小提琴 ：

[].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>