Menampilkan semua spoiler di kaskus programmers style

Posted: 27 Jun 2015, Last updated: 27 Jun 2015

Singkat kata:

  1. Buka halaman kaskus yang banyak spoilernya
  2. Tekan F12 pada Chrome atau Mozilla dan aktifkan tab console.
  3. Copas atau ketikkan kode di bawah:
$(".spoiler").each(function() { $(this).find("#bbcode_spoiler").click(); });

Atau

$(".spoiler").each(function() { var x = $(this).find("#bbcode_spoiler"); spoiler(x[0]); });

Kisah selengkapnya:

Semua berawal ketika saya kebetulan mengunjungi thread gorilla tampan di kaskus. Kemudian saya browsing ke beberapa page dan kembali lagi ke halaman awal dan merasa reseh karena harus mengklik semua tombol spoiler sekali lagi. Oleh karena itu, berhubung saya sedikit tahu mengenai pemrograman, terpikirlah suatu akal bulus.

Saya pun memulai dengan inspeksi tombol yang bersangkutan dengan cara klik kanan di tombol tersebut dan pilih "inspect element". Oh ya, saya menggunakan Google Chrome. Untuk browser mozilla harusnya tidak terlalu berbeda. Syntax tombol tersebut selengkapnya seperti berikut:

<input id=bbcode_spoiler type="button" value="Show" class="spoiler_558e54edc4ee2"style="width:60px;font-size:10px;margin:0px;padding:0px;" onClick="spoiler(this);">

Ada beberapa atribut penting dari elemen input HTML tersebut, antara lain:

  • id=bbcode_spoiler
  • onClick="spoiler(this);"

Dan di bagian <head> kaskus ternyata ada memanggil jQuery. Sehingga dapat mempermudah saya untuk mencapai tujuan ini. Pemikiran pertama adalah untuk menggunakan jQuery untuk men-select semua tombol tersebut dan menjalankan fungsi "spoiler(this)" pada tombol tersebut. Saya pun masuk ke web console google chrome (F12, tab console) dan mencoba:

$("#bbcode_spoiler").length

Ketika dijalankan, ternyata $("#bbcode_spoiler") hanya mendapatkan satu elemen, sedangkan tombol yang saya targetkan seharusnya ada 4 buah. Setelah diselidiki, ternyata selector id pada jQuery hanya akan mengembalikan satu elemen saja. Agar dapat mengembalikan banyak elemen, selector yang digunakan harus selector class. Saya pun melakukan "inspect element" kembali. Beruntung ternyata struktur DOM (Document Object Model) dari spoiler tersebut adalah sebagai berikut:

<div class="spoiler">
  <div id="bbcode_div">
    <b>Spoiler</b> for<i>...</i>
    <input id="bbcode_spoiler" onclick="spoiler(this);"/>
  </div>
  <!-- Sisanya tidak saya perdulikan -->
</div>

Setiap spoiler ternyata dibungkus oleh satu div dengan class "spoiler" yang membungkus tombol sekaligus content dari spoiler tersebut. Jadi kita dapat melakukan seleksi terhadap semua spoiler dengan perintah $(".spoiler"). Akan tetapi kita perlu menjalankan fungsi "spoiler(this)" pada tombol #bbcode_spoiler yang terdapat di dalam setiap div spoiler tersebut. Untuk itu, maka saya menjalankan:

$(".spoiler").each(function() { var x = $(this).find("#bbcode_spoiler"); spoiler(x[0]); });
Yaitu:
  • $(".spoiler") menyeleksi semua div dengan class="spoiler"
  • .each(function() {}) untuk menjalankan suatu fungsi pada tiap-tiap div dengan class spoiler tersebut
  • $(this) di dalam function mewakili div spoiler dari dalam fungsi
  • .find("#bbcode_spoiler") untuk mencari elemen dengan id="bbcode_spoiler" di dalam $(this). Yaitu tombol bbcode yang kita maksud
  • Hasil seleksi tombol bbcode tersebut kemudian kita simpan dalam variabel x. Masih berupa objek jQuery.
  • Fungsi spoiler hanya menerima objek DOM yang bisa kita dapatkan dari x[0]. Sehingga kita dapat jalankan fungsi spoiler() pada x[0]: spoiler(x[0]);

Untuk mendapatkan objek DOM dari objek jQuery, cukup perlakukan objek jQuery seperti suatu array yang terdiri dari kumpulan objek DOM. Yang mana untuk kasus ini, kita tahu bahwa x hanya memiliki satu elemen array. Sehingga kita panggil saja dengan x[0].

Ternyata masih cukup rumit, sehingga kemudian terpikir bahwa tidak perlu pusing dengan nama fungsi "spoiler", cukup klik saja tombol yang dimaksud. Untungnya hasil searching di google memberi tahu bahwa hal tersebut dapat dilakukan dengan fungsi .trigger("click"); atau sederhananya, .click(); saja. Dan ini dilakukan pada objek jQuery sehingga kita tidak perlu mengkonversi ke objek DOM. Terakhir, kodenya menjadi:

$(".spoiler").each(function() { $(this).find("#bbcode_spoiler").click(); });

Yah... demikian sharing dari saya, semoga menyegarkan bagi yang expert, dan menginspirasi bagi yang pemula. Have a nice day :)