如何知道点击了类中的哪个索引答案

【问题标题】：How to know which index in the class is clicked如何知道点击了类中的哪个索引
【发布时间】：2015-04-22 21:46:40
【问题描述】：

看着这个link，我在想类实际上是被索引的。如果我有这段代码，如何在 JavaScript 或 jQuery 中获取单击按钮的类的索引？

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

【问题讨论】：

有点混乱，类没有被索引，而且根本没有真正的索引，但是 jQuery 有一个 index 方法可以计算元素上方的兄弟姐妹的数量并告诉你在 DOM 之前还有多少其他元素，给你一种索引？
他们似乎在这个 w3schools 的例子中被索引。 w3schools.com/jsref/…
这比最初的问题要清楚得多。任何具有表示复数的s 的方法，例如getElements ...，都会返回一个nodeList，它是一个类似数组的对象，带有用于访问返回的每个元素的索引。
感谢您的帮助。

标签： javascript jquery html class button

【解决方案1】：

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

jQueryindex

从匹配的元素中搜索给定的元素。

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

谢谢。如何从这里返回 id？ – 句法 7 分钟前

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

【讨论】：

谢谢。如何从中返回 id？
$(this).attr('id');

【解决方案2】：

在 jquery 中： $( "#b1" ).index()

编辑：刚刚看到您的更新，您可以在 jquery 中对按钮单击索引执行此操作

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

【讨论】：

如何返回 id，因为我要将其设置为变量
$(this).attr('id');

【解决方案3】：

您可能正在考虑由var nodes = document.querySelectorAll('.class_name') 返回的NodeList，然后可以执行nodes.length 和console(nodes[1].id) 之类的操作。

see MDN

【讨论】：

【解决方案4】：

您可以使用它来遍历包含按钮的子元素。假设唯一的孩子是有问题的按钮，你可以得到这样的索引。

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>

【讨论】：

【解决方案5】：

没有 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。

【讨论】：