Kaedah JQuery membungkus DOM nodes_jquery

Contoh dalam artikel ini menerangkan kaedah membungkus nod DOM dengan JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Jika anda ingin membungkus nod dengan teg lain, JQuery menyediakan kaedah yang sepadan, wrap(), yang sangat berguna untuk memasukkan teg berstruktur tambahan ke dalam dokumen, dan ia tidak akan memusnahkan semantik dokumen asal.

balut()

Salin kod Kod adalah seperti berikut:

$("#li_1").wrap("< ;kuat> 128dba7a3a77be0113eb0bea6ea0a5d0");

Keputusan yang diperolehi adalah seperti berikut:

<strong>
  <li id="li_1" title="PHP编程">简单易懂的PHP编程</li>
</strong>

Terdapat dua kaedah lain untuk membungkus operasi nod, iaitu wrapAll() dan wrapInner().

kaedah wrapAll()

Kaedah ini akan membalut semua elemen padanan dengan satu elemen. Ia berbeza daripada kaedah wrap(), yang membungkus semua elemen secara individu. Kod JQuery adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$(".li_2").wrapAll("8e99a69fbe029cd4e2b854e244eab143 5db2928210d88216be1222e5496bb408");

HTML yang dibalut menggunakan kaedah wrapAll() kelihatan seperti ini:

<strong>
  <li class="li_2" title="C编程">简单易懂的C编程</li>
  <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li>
</strong>

kaedah wrapInner()

Kaedah ini membungkus sub-kandungan (termasuk nod teks) setiap elemen padanan dengan penanda berstruktur lain.

Salin kod Kod adalah seperti berikut:

$("#li_4").wrapInner("8e99a69fbe029cd4e2b854e244eab143 5db2928210d88216be1222e5496bb408");

Selepas menjalankan kod, didapati bahawa kandungan dalam teg 8e99a69fbe029cd4e2b854e244eab143 telah dibalut oleh sepasang tag 25edfb22a4f469ecb59f1190150159c6

<li id="li_4" title="JQuery">
  <strong>简单易懂的JQuery编程</strong>
</li>

Kod JQuery untuk contoh ini adalah seperti berikut:

<script type="text/javascript">
//<![CDATA[
$(function(){
  $("#btn_1").click(function(){
    //用<strong>元素把<li>元素包裹起来
    $("#li_1").wrap("<strong></strong>");
  })
  $("#btn_2").click(function(){
    $(".li_2").wrapAll("<strong></strong>");
  })
  $("#btn_3").click(function(){
    $("#li_4").wrapInner("<strong></strong>");
  })
});
//]]>
</script>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.