[Traversing] JQ - nextUntil() 메서드 - 주어진 두 인수 사이의 모든 다음 형제요소 반환

nextUntil() 예제 

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});

});

</script>

<div style="width:500px;" class="hz">

  <ul>ul (parent)  

    <li>li</li>

    <li>li</li>

    <li class="start">li class="start"</li>

    <li>li</li>

    <li>li</li>

    <li>li</li>

    <li class="stop">li class="stop"</li>

  </ul>   

</div>

결과보기 

nextUntil() 정의 

 

selector와 stop 사이의 모든 다음 형제 요소 중 filter에 해당하는 요소 반환.

※ 형제 요소 : 동일 부모 요소 갖는 요소. 
※ 이 메서드는 DOM 트리에서 형제 요소 따라 탐색. 

 

---

 

1.

매개변수가 모두 빈 경우, nextAll() 메서드와 마찬가지로 다음의 모든 형제 요소 반환.

 

2.

next() 메서드 : 선택 요소의 다음 형제 요소 반환.

nextAll() 메서드 : 선택 요소의 모든 다음 형제 요소 반환.

 

nextUntil() 구문 

 

$(selector).nextUntil(stop,filter)

 

---

[매개변수]

 

stop

선택. 다음 일치 형제 요소에 대한 검색 중지 위치.
(가능값 종류: 선택자 표현식, 요소, jQuery 객체)

 

filter

선택. selector와 stop 사이 다음 형제 요소 중 해당 선택 요소 범위를 좁히기 위한 선택자 표현식. 
※ 여러 형제요소를 반환하려면 각 식을 쉼표로 구분.

 

---

[반환값]

 

selector < filter에 해당하는 다음 형제 요소 < stop  

 

nextUtil() 예제 

[filter 매개변수 있는 경우]

 

<style>

.siblings * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("li.start").nextUntil("li.stop", ".first").css({"color": "red", "border": "2px solid red"});

});

</script>

<div style="width:500px;" class="siblings">

  <ul>ul (parent)  

    <li>li</li>

    <li></li>

    <li class="start">li class="start"</li>

    <li class="first">li class="first"</li>

    <li>li</li>

    <li class="second">li class="second"</li>

    <li class="stop">li class="stop"</li>

  </ul>   

</div>

결과보기

---

[여러 filter 매개변수 있는 경우]

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("h2").nextUntil("h5", ".first,.second,.third").css({"color": "red", "border": "2px solid red"});

});

</script>

<div style="width:500px;" class="hz">

  <div> 부모div

    <p>p</p>

    <span>span</span>

    <h2>h2</h2>

    <h3>h3</h3>

    <p>p</p>

    <p class="first">p class="first"</p>

    <p>p</p>

    <span class="second">span class="second"</span>

    <span class="second">span class="second"</span>

    <span>span</span>

    <h3 class="third">h3 class="third"</h3>

    <h5>h5</h5>

  </div>

</div>

 

결과보기

---

[stop 매개변수가 DOM인 경우]

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  var DOM = document.getElementsByClassName("li.stop");

  $("li.start").nextUntil(DOM).css({"color": "red", "border": "2px solid red"});

});

</script>

<div style="width:500px;" class="hz">

  <ul>ul (parent)  

    <li>li</li>

    <li>li</li>

    <li class="start">li class="start"</li>

    <li>li</li>

    <li>li</li>

    <li>li</li>

    <li class="stop">li class="stop"</li>

  </ul>   

</div>

 

결과보기

---

[stop 매개변수가 DOM이고, filter 매개변수가 있는 경우]

 

<style>

.siblings * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  var DOM = document.getElementsByClassName("li.stop");

  $("li.start").nextUntil(DOM, ".first").css({"color": "red", "border": "2px solid red"});

});

</script>

<div style="width:500px;" class="siblings">

  <ul>ul (parent)  

    <li>li</li>

    <li>li</li>

    <li class="start">li class="start"</li>

    <li class="first">li class="first"</li>

    <li>li</li>

    <li class="first">li class="first"</li>

    <li class="stop">li class="stop"</li>

  </ul>

</div>

 

결과보기