Pemilahan jQuery - metode contents()

Contoh

Mencari semua node teks di dalam paragraf dan membalutnya dengan tanda tebal.

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

Coba sendiri

Definisi dan penggunaan

Metode contents() mendapatkan node anak dari setiap elemen yang cocok dalam kumpulan elemen yang disesuaikan, termasuk node teks dan node komentar.

Sintaks

.contents()

Penjelasan detil

Jika diberikan objek jQuery yang merepresentasikan kumpulan elemen DOM, metode .contents() memungkinkan kita untuk mencari node anak langsung dari elemen-elemen ini di pohon DOM dan membuat objek jQuery baru yang cocok dengan elemen-elemen yang disesuaikan. .contents() dan .children() Metode yang sama, tetapi yang pertama termasuk node teks dan elemen HTML dalam objek jQuery hasil.

Metode .contents() juga dapat digunakan untuk mendapatkan dokumen konten iframe, asalkan iframe berada di dalam domain yang sama dengan halaman utama.

Pikirkan div berikut ini yang memiliki beberapa node teks, setiap node dipisahkan oleh elemen ganti baris (br):

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  <br /> <br />
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
</div>

Kami dapat menggunakan metode .contents() untuk mengubah blok teks ke paragraf yang baik:

$('.container').contents().filter(function() {
  return this.nodeType == 3;
)
  .wrap('<p></p>')
.end()
.filter('br')
  .remove();

Coba sendiri

Kode ini akan menerima konten <div class="container"> pertama, kemudian menyaring node teks, dan mengemas node teks ke dalam tag paragraf. Hal ini dilakukan melalui pengujian properti .nodeType elemen. Properti ini menyimpan kode angka yang menunjukkan jenis node; node teks menggunakan kode 3. Konten akan disaring kembali, kali ini untuk elemen <br />, elemen ini akan dihapus.