我可以获得点击元素的数量

问题描述

我有一些具有相同类名的元素。

如何获取我点击的元素数量 onclick 事件？

例如：

  var x = document.getElementsByClassName（myclass）。 （a = 0; a< = x; a ++）
 
 
 
 //这里我想获得点击的myclass 
} 
  

解决方案

您可以使用 indexOf 在 document.getElementsByClassName（myclass）的数组上。您可以使用 Array.from 或 []。slice.call 制作数组。

假设您的点击处理程序看起来像下面的代码段，他们执行某些操作 e.target 其中 e.target 是被点击的元素，您可以检查 indexOf e.target

  document.addEventListener（click，function（e）{if（e.target.classList.contains（myclass））{/ *上面的部分也可以看像div1.onclick = function（e）{...}; div2.onclick = function（e）{...}; ... * / console.log（Do something to％o，e.target）; console.log点击元素的索引：％d，Array.from（document.getElementsByClassName（myclass））。indexOf（e.target））;}} ）;  

 < div> < div class =myclass> A0< / div> < DIV> B1< / DIV> < div class =myclass> A2< / div>< / div>< div> < DIV> B3< / DIV> < div class =myclass> A4< / div>< / div>< div class =myclass> A5< / div>< div class =myclass> A6< / div> < div> B7< / div>< div class =myclass> A8< / div>  

如果您想要在同一个父元素中的元素的索引，可以改用：

  Array.from（e.target.parentNode.children）.indexOf（e.target）
  

如果要使用 myclass 类将元素限制在上面，您可以使用以下内容： / p>

  Array.from（e.target.parentNode.getElementsByClassName（myclass））。indexOf（e.target）
  

或直接的孩子：

 code> Array.from（e.target.parentNode.children）.filter（function（elem）{
 return elem.classList.contains（myclass）; 
}）。indexOf e.target）
  

I have a few elements with identical class names.

How can I get the number of the elements which I clicked with onclick events?

For example:

var x = document.getElementsByClassName("myclass").length;

for (a=0; a<=x; a++)
{
     // here i want get number of clicked myclass
}

解决方案

You can use indexOf on an array of document.getElementsByClassName("myclass"). You can use Array.from or [].slice.call to make the array.

Assuming your click handlers look like in the snippet below and they "Do something to e.target" where e.target is the element that has been clicked, you can check the indexOf e.target on the array like this:

document.addEventListener("click", function(e) {
  if (e.target.classList.contains("myclass")) {
    /*
      The above part could as well look like
      div1.onclick = function(e){…};
      div2.onclick = function(e){…};
      …
    */
    console.log("Do something to %o", e.target);
    console.log("Index of clicked element: %d", Array.from(document.getElementsByClassName("myclass")).indexOf(e.target));
  }
});

<div>
  <div class="myclass">A0</div>
  <div>B1</div>
  <div class="myclass">A2</div>
</div>
<div>
  <div>B3</div>
  <div class="myclass">A4</div>
</div>
<div class="myclass">A5</div>
<div class="myclass">A6</div>
<div>B7</div>
<div class="myclass">A8</div>

If you want the index of the element within the same parent element, you can instead use:

Array.from(e.target.parentNode.children).indexOf(e.target)

If you want to restrict the above to elements with the myclass class, you can use something like:

Array.from(e.target.parentNode.getElementsByClassName("myclass")).indexOf(e.target)

Or for direct children:

Array.from(e.target.parentNode.children).filter(function(elem){
  return elem.classList.contains("myclass");
}).indexOf(e.target)

这篇关于我可以获得点击元素的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！