Gunakan jQuery untuk mencari elemen kanak -kanak bersarang dan melaksanakan fungsi 'tunjukkan lebih banyak'

Artikel ini bertujuan untuk menangani bagaimana untuk mengesan elemen sasaran kanak-kanak yang bersarang dalam struktur HTML berbilang lapisan apabila menggunakan jQuery untuk melaksanakan ciri-ciri yang lebih banyak. Kami akan meneroka bagaimana untuk mencari dan mengendalikan elemen sasaran dengan berkesan melalui Dom Traversal, digabungkan dengan ParentNode dan QuerySelector, untuk mengembangkan dan menutup kandungan. Artikel ini menyediakan contoh kod terperinci dan arahan langkah untuk membantu pemaju memahami dan menggunakan teknik ini.

Dalam pembangunan web, anda sering menghadapi situasi di mana anda perlu memaparkan atau menyembunyikan beberapa kandungan secara dinamik. Ciri "Show More" adalah contoh yang sama. Tutorial ini akan memberi tumpuan kepada cara menggunakan jQuery untuk melaksanakan fungsi ini dan menyelesaikan cara untuk mencari unsur -unsur kanak -kanak yang perlu dikendalikan dengan tepat apabila struktur HTML adalah kompleks dan kandungan sasaran mendalam.

Strategi untuk meletakkan elemen kanak -kanak bersarang

Menggunakan kaedah prev () atau seterusnya () secara langsung mungkin tidak berfungsi apabila elemen sasaran bukan nod saudara langsung tetapi bersarang dalam struktur DOM yang lebih dalam. Pada masa ini, kita perlu menggunakan kaedah Dom Traversal untuk bermula dari elemen yang mencetuskan acara, mencari atau turun sehingga elemen sasaran dijumpai.

Kaedah biasa termasuk:

• ParentNode : Digunakan untuk mendapatkan nod induk nod semasa. Anda boleh menggunakan ParentNode beberapa kali untuk melintasi pokok dom ke atas.
• Paling dekat () : Bermula dari elemen semasa, cari ke elemen nenek moyang pertama yang sepadan dengan pemilih.
• Cari () : Cari elemen yang sepadan dengan pemilih di kalangan keturunan elemen semasa.
• QuerySelector () : Gunakan pemilih CSS untuk mencari elemen sepadan pertama dalam julat elemen yang ditentukan. Ini adalah kaedah JavaScript asli yang juga boleh digunakan bersempena dengan objek jQuery.

Contoh: Gunakan ParentNode dan QuerySelector untuk melaksanakan "Tunjukkan Lebih Banyak"

Katakan kami mempunyai struktur HTML berikut:

 <div class="text-container">
  <h1> Tajuk pergi ke sini </h1>
  <h2> Subtitle </h2>
  <div class="wrapper">
    <div class="content hideContent">
      Lorem Ipsum Dolor Sit Amet, Consetetur Sadipscing Elitr, Sed Diamond Nonumy Eirmod Tempor Melibatkan UT Labore et Dolore Magna Aliquyam Erat, Sed Diamond Voluptua.
      Di Vero eos et Accusam et hanya Dolores et ea Rebum. Stet Clita Kasd Gubegren, tiada laut Takimata sanctus est lorem ipsum dolor duduk amet.
      <p> Beberapa lagi teks </p>
      <ul>
        <li> Beberapa lagi teks </li>
        <li> Beberapa lagi teks </li>
        <li> Beberapa lagi teks </li>
      </ul>
    </div>
  </div>
  <div class="show-more">
    <a href="#"> Tunjukkan lebih banyak </a>
  </div>
</div>

Matlamat kami adalah untuk menukar status paparan elemen. Konkelompok apabila mengklik pautan "Tunjukkan Lebih Banyak".

Berikut adalah kod untuk melaksanakannya menggunakan jQuery:

 $ (". Tunjukkan-lebih A"). ("Klik", Fungsi () {
  let div = this.parentNode.ParentNode.QuerySelector ('. Kandungan');
  biarkan kelas = ['showcontent', 'hideContent'];

  jika (div.classlist.contains (kelas [0])) {
    div.classlist.replace (kelas [0], kelas [1]);
  } else {
    div.classlist.replace (kelas [1], kelas [0]);
  }

  this.textContent = this.textContent == 'Tunjukkan lebih banyak'? 'Tunjukkan kurang': 'Tunjukkan lebih banyak';
});

Kod ini mula-mula mendapati elemen yang diklik, dan kemudian menggunakan ParentNode.ParentNode untuk meleset ke atas melalui kedua-dua lapisan untuk mencapai elemen .text-Container. Seterusnya, gunakan QuerySelector ('. Kandungan') untuk mencari elemen. Akhirnya, mengikut kelas semasa elemen. Konktasi, menukar status paparannya dan mengemas kini teks yang dipautkan.

Pada masa yang sama, kita perlu menentukan gaya CSS.

 .showcontent {
  paparan: blok;
}

.HideContent {
  Paparan: Tiada;
}

Penjelasan kod:

1. $ (". Tunjukkan lebih"). ("Klik", fungsi () {...}); : Mengikat klik peristiwa untuk semua tag di bawah unsur-unsur pertunjukan-lebih.
2. let div = this.parentNode.ParentNode.QuerySelector ('. Kandungan'); : Dapatkan elemen. Ini menunjukkan kepada tag yang diklik. This.parentnode mendapat elemen yang lebih. this.parentnode.parentnode mendapat elemen .text-container. QuerySelector ('. Kandungan') mendapati elemen dengan kelas sebagai kandungan dalam elemen .text-container.
3. biarkan kelas = ['showcontent', 'hideContent']; : Tentukan array yang mengandungi konteks dan persembunyian untuk memudahkan penukaran kelas berikutnya.
4. jika (div.classlist.contains (kelas [0])) {...} else {...} : Semak sama ada elemen. Content mengandungi kelas yang bersemangat. Jika dimasukkan, ganti dengan HideContent, jika tidak, gantikan dengan konteks.
5. this.textContent = this.textContent == 'Tunjukkan lebih banyak'? 'Tunjukkan kurang': 'Tunjukkan lebih banyak'; : Tukar ke "Tunjukkan kurang" atau "Tunjukkan lebih banyak" berdasarkan teks semasa pautan.

Perkara yang perlu diperhatikan

• Pastikan perpustakaan jQuery diperkenalkan dengan betul.
• Memahami struktur DOM adalah kunci untuk mencari elemen sasaran dengan tepat. Pokok Dom boleh diperiksa menggunakan alat pemaju penyemak imbas.
• QuerySelector () adalah kaedah JavaScript asli yang biasanya melakukan lebih baik daripada pemilih JQuery. Apabila anda tidak perlu menggunakan ciri -ciri lain jQuery, anda boleh mempertimbangkan menggunakan QuerySelector ().
• Dalam struktur HTML yang kompleks, penggunaan ParentNode yang berlebihan boleh membuat kod sukar untuk dikekalkan. Pertimbangkan menggunakan kaedah terdekat () atau cari () untuk meningkatkan kebolehbacaan kod.

Meringkaskan

Tutorial ini menerangkan cara menggunakan jQuery untuk mencari elemen kanak -kanak bersarang dan melaksanakan fungsi "menunjukkan lebih banyak". Dengan fleksibel menggunakan kaedah DOM Traversal, kita dapat dengan mudah memanipulasi struktur HTML yang kompleks dan mencapai pelbagai kesan dinamik. Dalam perkembangan sebenar, kaedah kedudukan kedudukan yang paling sesuai harus dipilih berdasarkan struktur HTML tertentu, dan memberi perhatian kepada kebolehbacaan dan pemeliharaan kod.

Atas ialah kandungan terperinci Gunakan jQuery untuk mencari elemen kanak -kanak bersarang dan melaksanakan fungsi 'tunjukkan lebih banyak'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!