DOM node_jquery를 래핑하는 JQuery의 방법

이 기사의 예에서는 JQuery로 DOM 노드를 래핑하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

노드를 다른 태그로 래핑하려는 경우 JQuery는 해당 메서드인 Wrap()을 제공합니다. 이는 문서에 구조화된 추가 태그를 삽입하는 데 매우 유용하며 원래 문서 의미를 파괴하지 않습니다.

랩()

코드 복사 코드는 다음과 같습니다.

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

얻은 결과는 다음과 같습니다.

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

노드 작업을 래핑하는 데는 WrapAll()과 WrapInner()라는 두 가지 다른 방법이 있습니다.

wrapAll() 메서드

이 방법은 일치하는 모든 요소를 ​​하나의 요소로 래핑합니다. 모든 요소를 ​​개별적으로 래핑하는 Wrap() 메서드와는 다릅니다. JQuery 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(".li_2").wrapAll("8e99a69fbe029cd4e2b854e244eab143 7aea71a7f19d2b328f111ad328a37deb");

wrapAll() 메소드를 사용하여 래핑된 HTML은 다음과 같습니다.

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

wrapInner() 메서드

이 방법은 일치하는 각 요소의 하위 콘텐츠(텍스트 노드 포함)를 다른 구조화된 마크업으로 래핑합니다.

코드 복사 코드는 다음과 같습니다.

$("#li_4").wrapInner("8e99a69fbe029cd4e2b854e244eab143 7aea71a7f19d2b328f111ad328a37deb");

코드를 실행한 결과 8e99a69fbe029cd4e2b854e244eab143 태그의 내용이 한 쌍의 25edfb22a4f469ecb59f1190150159c6로 래핑된 것으로 나타났습니다.

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

이 예제의 JQuery 코드는 다음과 같습니다.

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

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.