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

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:

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

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

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