Javascript ile tıklanan elemanın sira numarasini bulmak

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor.



<style>
li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;}
</style>
<ul id="kutu">

  <li class="demo">-1- </li>

  <li class="demo">-2- </li>

  <li class="demo">-3- </li>

  <li class="demo">-4- </li>

  <li class="demo">-5- </li>

</ul>

<div>Sıralama Bilgileri</div>
<strong id="siraSonuc"></strong>
<script>

var elemanlar=[];
var sira;
var ind;

elemanlar=document.querySelectorAll(".demo");

for (var i=0;i<elemanlar.length;i++){

  elemanlar[i].addEventListener("click",function(){
  var ata=this.parentNode;
  ind=Array.prototype.indexOf.call(ata.children, this);
  sira=Array.prototype.indexOf.call(ata.children, this)+1;
  document.getElementById("siraSonuc").innerHTML="Index no: "+ind+" | Sıra no: "+sira;

 });

}
</script>
Bunun canlı hali aşağıdaki gibidir. Sonuçları görmek için aşağıdaki sayılara tıklayın.

• -1-
• -2-
• -3-
• -4-
• -5-

Sıralama Bilgileri