jQuery :last-of-type Selector
Contoh
Memilih setiap elemen <p> dimana elemen <p> tersebut berada pada urutan terakhir dari elemen <p> lainnya dalam elemen induk yang sama.
Defenisi dan Penggunaan
Selektor :last-of-type digunakan untuk memilih elemen jenis tertentu yang merupakan elemen turunan terakhir dari elemen sejenisnya dalam satu elemen induk yang sama.
Sebagai Contoh, misalnya kita mempunyai struktur kode seperti berikut ini:
Pada struktur kode di atas, kode yang berwarna merah disebut sebagai elemen induk, sehingga setiap elemen yang terdapat di dalamnya (di antara tag pembuka dan tag penutupnya), merupakan elemen turunannya, atau child element.
Di dalam elemen induk tersebut pada contoh di atas, ada terdapat empat elemen turunan di dalamnya, yaitu elemen span (berwarna ungu), elemen paragraf pertama (berwarna hijau), elemen paragraf kedua (berwarna biru) dan elemen div (berwarna jingga).
Dari contoh kode di atas, elemen yang berwarna ungu disebut sebagai first-child element atau elemen turunan pertama, sebab ia menduduki urutan pertama dari elemen turunan lainnya dalam induk elemen yang sama. Dan elemen yang berwarna jingga disebut sebagai last-child element atau elemen turunan terkahir, sebab ia menduduki urutan terakhir dari elemen turunan lainnya dalam induk elemen yang sama. Sementara elemen yang berwarna biru disebut sebagai last-of-type dari elemen <p>, sebab ia merupakan elemen <p> yang paling akhir dari elemen <p> lainnya dalam induk elemen yang sama.
Jadi, selektor :last-of-type akan memilih elemen untuk jenis tertentu saja, yang urutannya berada paling akhir dari elemen sejenisnya dalam satu induk elemen yang sama.
Tip: Gunakan selektor :first-of-type untuk memilih seluruh elemen yang merupakan elemen turunan pertama dalam induk elemen yang sama untuk elemen turunan yang sejenis.
Rumus
Contoh Penggunaan
Mewarnai latar belakang dari seluruh elemen "p" yang merupakan elemen "p" turunan akhir di antara elemen "p" yang lainnya dalam elemen induk yang sama, menjadi warna hijau.
x
<html> <head> <script src="https://cdn.rawgit.com/cholebeharia/blogku/1a8ade58/jquery.min.js"></script> </head> <body> <div style="border:1px solid black"> <p>Paragraf</p> <p>Paragraf</p> <div>Division</div> </div> <br> <div style="border:1px solid black"> <span>Span</span> <p>Paragraf</p> <p>Paragraf</p> <span>Span</span> </div> <br> <div style="border:1px solid black"> <div>Division</div> <span>Span</span> <p>Paragraf</p> <div>Division</div> <p>Paragraf</p> </div> <script> $(document).ready(function(){ $("p:last-of-type").css("background-color","green"); }); </script> </body> </html>Anda bisa langsung mengedit isi dari kode-kode di atas dan melihat perubahannya.
Hasilnya:
