Bu yazımızda jQuery eq() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
eq() metodu ile Html öğeleri içerisinden indeks numarasına göre istediğimiz öğeyi seçebiliriz. eq() metodunu kullanırken 2 konuya dikkat etmemiz gerekiyor.
Birincisi, Html öğeleri içerisinden seçim yaparken ilk öğenin indeks numarasının sıfır (0) olduğunu unutmayalım.
İkincisi ise eq() metoduna parametre olarak eksi (-) bir değer verirsek Html öğeleri içerisinde tam tersten yani sondan başlar ve sondaki ilk öğenin indeks numarasını -1 olarak kabul eder.
Şöyle bir uygulama yapalım:
⇒ 4 tane p etiketi yazalım.
⇒ Birinci butona tıklandığında p etiketleri içerisinden indeks numarası 2 olanın arkaplan rengini sarı yapalım.
⇒ İkinci butona tıklandığında p etiketleri içerisinden indeks numarası -3 olanın arkaplan rengini kırmızı yapalım.
Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<button id="eq2">eq(2)</button> <button id="eq-3">eq(-3)</button> <p>Lorem ipsum dolor. (index 0, index -4)</p> <p>Lorem ipsum dolor. (index 1, index -3)</p> <p>Lorem ipsum dolor. (index 2, index -2)</p> <p>Lorem ipsum dolor. (index 3, index -1)</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> button { padding: 10px; margin-right: 8px; margin-bottom: 18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#eq2").click(function() { $("p").eq(2).css("background-color", "yellow"); }); $("#eq-3").click(function() { $("p").eq(-3).css("background-color", "red"); }); }); </script> |
Butonlara tıkladığınızda p etiketlerinin arkaplan renklerinin değiştiğini görebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery Document Ready Fonksiyonu Nedir? Nasıl Kullanılır?
jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}