클릭 된 요소의 수는 무엇입니까

Question

동일한 클래스 이름을 가진 요소가 몇 개 있습니다.

onclick 이벤트로 클릭 한 요소의 수는 어떻게 얻을 수 있습니까? 예를 들어

: 당신은 onClick 이벤트 핸들러에서 클릭 된 요소에 대한 정보를 캡처 할 수 있습니다

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

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

Answer 1

.

클릭 이벤트 발생시 실행되는 기능은 이벤트를 첫 번째 매개 변수로 전달합니다. 이 이벤트 객체에는 클릭 된 특정 요소에 대한 참조가 될 대상이 있습니다.

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)