クリックした要素の数を取得することができます

Question

同じクラス名の要素がいくつかあります。

onclickイベントで私がクリックした要素の数を取得するにはどうすればよいですか？例えば

：

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

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

Answer 1

あなたはonClickイベントハンドラでクリックされた要素についての情報を取り込むことができます。

イベントが発生したときに実行される関数は、最初のパラメータとしてイベントが渡されます。このイベントオブジェクトには、クリックされた特定の要素への参照となるターゲットがあります。

function clickHandler(event) { 
    console.log(event.target); 
} 

Answer 2

あなたはdocument.getElementsByClassName("myclass")のアレイ上indexOfを使用することができます。 Array.fromまたは[].slice.callを使用して配列を作成できます。

と仮定すると、あなたのclickハンドラは、以下のスニペットのように見えるとe.targetがクリックされた要素であるところ、彼らはあなたがこのようなアレイ上indexOfe.targetを確認することができ、「e.targetに何かをする」：

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>

あなたは、同じ親要素内の要素のインデックスをしたい場合、あなたの代わりに使用することができます。

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

あなたはmyclassクラスで要素に上記を制限したい場合は、あなたのようなものを使用することができます

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

または直接子供たちのため：

を

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