jQuery 강좌 | Tips > 이웃한 요소와 함께 새 요소로 감싸기

jQuery의 .wrap()이나 .wrapAll() 등을 이용하면 여러 요소를 묶어서 새 요소로 감쌀 수 있습니다.

클래스 값이 같거나 네스팅이 되어 있다면 원하는 결과를 얻기 쉬운데, 특별한 특징이 없는 요소들을 감쌀 때는 그대로 사용하기 힘듭니다.

예를 들어

<p class="a">A</p>
<p class="b">B</p>
<p class="c">C</p>
<p class="d">D</p>
<p class="a">A</p>
<p class="b">B</p>
<p class="c">C</p>
<p class="d">D</p>

<p class="a">A</p>
<div class="e">
  <p class="b">B</p>
  <p class="c">C</p>
</div>
<p class="d">D</p>
<p class="a">A</p>
<div class="e">
  <p class="b">B</p>
  <p class="c">C</p>
</div>
<p class="d">D</p>

처럼 만들려면 .wrap() 뿐만 아니라 여러 메소드를 사용해야 합니다.

방법은 다음과 같습니다.

$( '.b' ).each(function() {
  $( this ).wrap('<div class="e"></div>').parent().next().appendTo( $( this ).parent() );
} );

클래스 값으로 b를 가진 요소를 div로 감싼 다음, 상위 요소의 바로 다음 요소를 이동시키는 것입니다.

Category

Created on 2016-11-26 00:43 | Updated on 2017-07-03 09:06