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> ");

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(" ");

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(" ");

Selepas menjalankan kod, didapati bahawa kandungan dalam teg telah dibalut oleh sepasang tag

<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.