• Q&A
  • 회원가입
  • 로그인

[Traversing] JQ - prevUntil() 메서드 - 특정 범위 안의 이전 형제요소 반환. (= prevUntil메서드 = 프리브언틸메서드)

목차
  1. prevUntil() 예제 
  2. prevUntil() 정의 
  3. prevUntil() 구문 
  4. prevUntil() 예제 - filter 개수 1개인 경우
  5. prevUntil() 예제 - filter 개수 여러 개 인 경우
  6. prevUntil() 예제 - 매개변수에 DOM만 있는 경우
  7. prevUntil() 예제 - 매개변수에 DOM과 filter가 둘 다 있는 경우

 

prevUntil() 예제 

 

<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").prevUntil("li.stop").css({"color": "red", "border": "2px solid red"});

});

</script>


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

  <ul>ul

    <li class="stop">li class="stop" (포함 X)</li>

    <li>li</li>

    <li>li</li>

    <li>li</li>

    <li class="start">class="start" (포함 X)</li>

    <li>li</li>

    <li>li</li>

  </ul>   

</div>


결과보기 

 

prevUntil() 정의 

 

selectorstop 사이의 모든 형제 요소 중 filter에 해당하는 요소 반환.

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

 


 

1.

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

 

2.

prev() 메서드 : 선택 요소의 이전 형제 요소 반환.

prevAll() 메서드 : 선택 요소의 모든 이전 형제 요소 반환.

 

 

prevUntil() 구문 

 

$(selector).prevUntil(stop,filter)

 


[매개변수]

 

stop

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

 

filter

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

 


[반환값]

 

selector < filter에 해당하는 요소 < stop 

 


prevUntil() 예제 - filter 개수 1개인 경우

 

<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").prevUntil("li.stop", ".my").css({"color": "red", "border": "2px solid red"});

});

</script>

</head>

<body>


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

  <ul>ul 

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

    <li class="my">li class="my"</li>

    <li>li</li>

    <li class="my">li class="my"</li>

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

    <li>li</li>

    <li>li</li>

  </ul>   

</div>

 

결과보기

 

prevUntil() 예제 - 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(){

    $("h4").prevUntil("h1", ".h2, .span, .p").css({"color": "red", "border": "2px solid red"});

});

</script>


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

  <div>

    <h1>h1 (포함 X)</h1>

    <h2 class="h2">h2 class="h2"</h2>

    <span>span</span>

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

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

    <p>p</p>

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

    <p>p</p>

    <h3>h3</h3>

    <h4>h4 (포함 X)</h4>

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

    <p>p</p>

  </div>

</div>


결과보기

 

prevUntil() 예제 - 매개변수에 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").prevUntil(DOM).css({"color": "red", "border": "2px solid red"});

});

</script>


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

  <ul>ul (parent)  

    <li class="stop">li class="stop" (포함 O)</li>

    <li>li</li>

    <li>li</li>

    <li>li</li>

    <li class="start">li class="start" (포함 X)</li>

    <li>li</li>

    <li>li</li>

  </ul>   

</div>

 

결과보기

PS. 위 예제 경우, DOM까지 포함되는 것에 주의.

 

prevUntil() 예제 - 매개변수에 DOM과 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(){

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

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

});

</script>


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

  <ul>ul (parent)  

    <li class="stop">li class="stop" (포함 X)</li>

    <li class="my"> class="my"</li>

    <li>li</li>

    <li class="my"> class="my"</li>

    <li class="start"> class="start" (포함 X)</li>

    <li>li</li>

    <li>li</li>

  </ul>   

</div>


결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012