JQuery로 요소와 요소사이의 요소들을 div로 묶을 때

요소와 요소사이의 모든 요소를 묶기

---

html에서 <hr>이나 <h2> 문단을 구분할 때, 문단마다 묶어주고 싶을 때가 있습니다. 그럴때 우리는 JQuery의 next API를 알고 활용해야 합니다.

* 만약 아래 html 소스가 있다면

<hr>
<span></span>
<a href="#"></a>
<hr>
<span></span>
<a href="#"></a>

$('hr').each(function(i, e) {
	if(i === 0) $(e).prepend('<div>') 
    else if((i + 1) === $('hr').length) $(e).prepend('</div>');
    else $(e).prepend('</div><div>');
});

* 로 단순히 생각할 수 있습니다.

보통 이렇게 작성하면 되는 거 아냐? 라고 생각 할 수는 있지만, HTML5에서 새롭게 추가 된 `자동으로 닫히는 태그(automatically close a tag)`라는 기능에 의해

<div></div>
<hr>
<span></span>
<a href="#"></a>
<div></div>
<hr>
<span></span>
<a href="#"></a>

위 html 소스로 변환 되어 버립니다.

이럴 때, 사용해야 하는 것이 next API입니다.

---

next() API란?

---

jQuery의 next() API는 DOM에서 특정 요소의 다음 형제 요소를 선택하는 기능을 제공합니다.

next() 메소드는 선택한 요소의 다음 형제 요소를 반환합니다. 이 때, 선택한 요소와 다음 형제 요소 사이에 다른 요소가 있더라도, next() 메소드는 다음 형제 요소만 반환합니다. 만약 다음 형제 요소가 없다면, null을 반환합니다.

next() 메소드는 선택한 요소에 대해 적용됩니다. 이 때, 선택한 요소는 jQuery 객체여야 합니다. 예를 들어, 다음과 같이 HTML 코드가 있다고 가정해 봅시다.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li class="highlight">Cherry</li>
  <li>Durian</li>
</ul>

만약 클래스가 "highlight"인 li 요소에 대해 next() 메소드를 적용한다면, 결과는 "Durian" li 요소가 됩니다. 이는 "highlight" 클래스를 가진 li 요소의 다음 형제 요소이기 때문입니다.

만약 next() 메소드를 연속해서 적용한다면, 다음 형제 요소의 다음 형제 요소를 반환할 수도 있습니다. 예를 들어, 위 예제에서 클래스가 "highlight"인 li 요소에 대해 next().next() 메소드를 적용한다면, 결과는 "null"이 됩니다. 이는 "highlight" 클래스를 가진 li 요소의 다음 형제 요소인 "Durian" li 요소 다음에 다른 형제 요소가 없기 때문입니다.

$(document).ready(function(){
  $(".highlight").next().css("background-color", "yellow");
});

위 코드는 클래스가 "highlight"인 요소 다음 요소의 배경색을 노랑색으로 바꾸는 코드입니다.

---

nextAll() API란?

---

이 함수는 특정 요소 다음에 오는 모든 형제 요소들을 선택하여 반환합니다.

이때 선택 범위는 선택한 요소 다음에 오는 모든 형제 요소들이 됩니다.

위에서 사용했던 html 소스를 다시 활용 해보겠습니다.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li class="highlight">Cherry</li>
  <li>Durian</li>
</ul>

위 요소 중에서 Banana 다음에 오는 모든 형제 요소를 선택하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

$("li:nth-child(2)").nextAll().css("background-color", "yellow");

또한 아래 코드처럼 사용할 수도 있습니다.

<ul>
  <li class="fruit">사과</li>
  <li class="fruit">바나나</li>
  <li class="vegetable">당근</li>
  <li class="fruit">딸기</li>
  <li class="vegetable">오이</li>
  <li class="fruit">포도</li>
  <li class="vegetable">고구마</li>
  <li class="fruit">수박</li>
</ul>

$("li:nth-child(2)").nextAll(".fruit").css("background-color", "yellow");

위 코드는 "fruit"이라는 클래스명을 가진 형제요소들의 배경색을 노랑색으로 바꾸는 코드입니다.

---

nextUntil() API란?

---

jQuery nextUntil API는 선택한 요소와 다음 요소들 중 특정 요소를 지정하여 그 사이의 모든 요소를 선택하는 메서드입니다. 이를 통해 선택한 요소와 기준 요소 사이의 모든 요소를 선택할 수 있습니다.

오늘의 제목처럼 요소와 요소 사이의 요소들을 추출 해내기 위한 유용한 API입니다.

아래는 기본 예제입니다.

$(selector).nextUntil(stopSelector, filter)

 

 

선택할 요소(selector)를 지정하고, 멈출 요소(stopSelector)를 지정한다음, css나 filter를 적용하시면 됩니다.

바로 예제를 보여드리겠습니다.

<ul>
  <li class="begin">사과</li>
  <li>바나나</li>
  <li class="end">딸기</li>
  <li>수박</li>
  <li>포도</li>
</ul>

$("li").eq(0).nextUntil("li:contains('수박')").css("background-color", "yellow");

위 코드에선 li 요소의 0번째, 즉 사과부터 수박이라는 텍스트를 포함한 요소까지 배경색을 노랑색으로 바꾸는 코드입니다.

그렇다면 begin 클래스를 가진 요소와 end 클래스를 가진 요소 부모요소로 div를 넣고싶다면 어떻게 해야할까요?

<ul>
  <li class="begin">사과</li>
  <li>바나나</li>
  <li class="end">딸기</li>
  <li>수박</li>
  <li>포도</li>
</ul>

$("li.begin").nextUntil("li.end").wrapAll('<div/>');

위 코드처럼 요소들을 감싸는 역할의 기능을 가진  wrapAll() 메서드로 감싸주시면

<ul>
    <div>
      <li class="begin">사과</li>
      <li>바나나</li>
      <li class="end">딸기</li>
    </div>
    <li>수박</li>
    <li>포도</li>
</ul>

위 html 소스로 변환됩니다.

 

 

---

wrap API 알아보기

---

 

2023.06.17 - [프로그래밍 언어/JQuery] - JQuery wrap API 예제 알아보기