JQuery

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


결과보기


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인