Bu yazımızda jQuery index() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
index() metodu ile bir Html öğesinin kaçıncı sırada olduğunu yani indeksini öğrenebiliriz. Burada dikkat etmemiz gereken nokta indeks numaraları 0’dan başlar. Yani ilk Html öğesinin indeks numarası 0 (sıfır) dır.
Şöyle bir uygulama yapalım:
⇒ 3 tane buton oluşturalım ve hangi butona tıklanırsa o butonun indeks numarasını alert mesajı ile gösterelim.
Html Kodları
|
1 2 3 4 5 6 7 |
<div id="box"> <button class="btn">Tıkla - index (0)</button> <button class="btn">Tıkla - index (1)</button> <button class="btn">Tıkla - index (2)</button> </div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> #box { border: 1px solid black; width: 180px; padding: 20px; } .btn { border: none; padding: 10px; width: 100%; margin-bottom: 10px; background-color: darkgrey; color: #fff; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#box button").click(function () { var result = $(this).index(); alert(result); }); }); </script> |
Butonlara tıkladığınızda tıklanan butonun indeks numarasını alert mesajı ile görebilirsiniz.
Umarım “jQuery index() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery animate(), stop() Metodları ve Kullanımları
jQuery Animasyon Özelliğini Açmak ve Kapatmak
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}