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


Hiç yorum yok:

Yorum Gönder

Firefox ile Bir Sitenin TLS Versiyonunu Nasıl Öğrenirsiniz?

TLS (Transport Layer Security), internet üzerinden yapılan iletişimi güvence altına alan bir protokoldür. Bir web sitesinin hangi TLS versiy...