.nextUntil()
선택한 요소의 다음에 위치한 요소를 조건에 맞을 때까지 찾습니다.
.nextUntil()
선택한 요소의 다음에 위치한 요소를 조건에 맞을 때까지 찾습니다.
문법(Syntax)
$("선택자").nextUntil();
$("선택자").nextUntil("선택자");
$("선택자").nextUntil("선택자","조건");
정의(Definition)
- 선택한 요소의 다음 형제 요소를 선택합니다.
- 선택한 요소의 다음 형제 요소 중 선택자(태그,아이디,클래스)를 통해 선택합니다.
- 선택한 요소의 다음 형제 요소 중 선택자부터 조건까지 선택합니다.
비교(Compare)
- .next() : 선택한 요소의 다음 형제 요소를 선택합니다.
- .nextAll() : 선택한 요소의 다음 모든 형제 요소를 선택합니다.
- .nextUntil() : 선택한 요소의 다음에 위치한 요소를 조건에 맞을 때까지 찾습니다.
Sample1
선택한 요소의 다음 요소를 조건을 걸어 선택합니다.
결과
탐색(Traversing)
- .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .parent() 메서드는 선택한 요소의 부모 요소를 선택합니다.
jquery
$(".select").nextUntil(".p").addClass("rLine");
html
<h3>탐색(Traversing)</h3>
<div class="list1">
<ul>
<li class="select">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li class="p">.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.parent() 메서드는 선택한 요소의 부모 요소를 선택합니다.</li>
</ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
li.p:before {content:'p'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>탐색(Traversing)</h3>
<div class="list1">
<ul>
<li class="select">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li class="p">.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.parent() 메서드는 선택한 요소의 부모 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>선택자</em>의 다음 부터 조건까지만 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").on("click", function(e){
e.preventDefault();
$(".list1 li").removeClass("rLine");
});
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$(".list1 .select").nextUntil(".p").addClass("rLine");
});
</script>
</body>
</html>
Sample2
선택한 요소의 다음 요소를 조건을 걸어 선택하고 필터 기능을 통해 한번 더 선택할 수 있습니다.
결과
조사 방식의 선택
- 인터뷰 기법
- 인터뷰 기법은 개별 사용자에게 깊이 있는 정보의 수집이 가능하고 설문 조사에 비해 더 심층적인조사를 할 수 있다는 장점을 가지고 있다.
- 어떤 인터뷰 진행자(moderator)의 진행 능력에 따라서 결과의 질적, 양적 수준이 달라질 수 있기 때문에 훈련된 진행자의 역할이 매우 중요하다.
- 관찰조사 기법
- 관찰조사 기법은 사용자를 대상으로 그들의 실제 사용 환경 내에서 일어나는 다양한 상황을 포괄적으로 관찰하는 방법으로 사용자를 깊이 있게 이해할 수 있는 기회를 제공해 준다.
- 사용자가 스마트문화콘텐츠 앱을 어떻게 사용하는지, 앱이 요구하는 작업들을 사용자가 어떻게 수행하는지 등의 행동을 관찰함으로써 니즈를 파악하는 방법이다
- 인터뷰 조사의 프로세스
- 예상되는 인터뷰 참여 사용자 규모를 중심으로 다음과 같은 인터뷰 조사 프로세스에 따라 서 일정계획을 수행한다.
- 관찰조사의 프로세스
- 관찰조사법은 사용자의 실제적 환경에서 자연스럽게 사용자의 행동과 경험을 관찰하는 방 법으로 다음과 같은 프로세스로 진행된다.
jquery
$("#s1").nextUntil("#s3", "dd").addClass("rLine");
html
<h3>조사 방식의 선택</h3>
<div class="list2">
<dl>
<dt id="s1">인터뷰 기법</dt>
<dd>인터뷰 기법은 개별 사용자에게 깊이 있는 정보의 수집이 가능하고 설문 조사에 비해 더 심층적인조사를 할 수 있다는 장점을 가지고 있다.</dd>
<dd>어떤 인터뷰 진행자(moderator)의 진행 능력에 따라서 결과의 질적, 양적 수준이 달라질 수 있기 때문에 훈련된 진행자의 역할이 매우 중요하다.</dd>
<dt id="s2">관찰조사 기법</dt>
<dd>관찰조사 기법은 사용자를 대상으로 그들의 실제 사용 환경 내에서 일어나는 다양한 상황을 포괄적으로 관찰하는 방법으로 사용자를 깊이 있게 이해할 수 있는 기회를 제공해 준다. </dd>
<dd>사용자가 스마트문화콘텐츠 앱을 어떻게 사용하는지, 앱이 요구하는 작업들을 사용자가 어떻게 수행하는지 등의 행동을 관찰함으로써 니즈를 파악하는 방법이다</dd>
<dt id="s3">인터뷰 조사의 프로세스</dt>
<dd>예상되는 인터뷰 참여 사용자 규모를 중심으로 다음과 같은 인터뷰 조사 프로세스에 따라 서 일정계획을 수행한다.</dd>
<dt id="s4">관찰조사의 프로세스</dt>
<dd>관찰조사법은 사용자의 실제적 환경에서 자연스럽게 사용자의 행동과 경험을 관찰하는 방 법으로 다음과 같은 프로세스로 진행된다.</dd>
</dl>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.dt:before {content:'dt'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.dd:before {content:'dd'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>조사 방식의 선택</h3>
<div class="list2">
<dl>
<dt id="s1">인터뷰 기법</dt>
<dd>인터뷰 기법은 개별 사용자에게 깊이 있는 정보의 수집이 가능하고 설문 조사에 비해 더 심층적인조사를 할 수 있다는 장점을 가지고 있다.</dd>
<dd>어떤 인터뷰 진행자(moderator)의 진행 능력에 따라서 결과의 질적, 양적 수준이 달라질 수 있기 때문에 훈련된 진행자의 역할이 매우 중요하다.</dd>
<dt id="s2">관찰조사 기법</dt>
<dd>관찰조사 기법은 사용자를 대상으로 그들의 실제 사용 환경 내에서 일어나는 다양한 상황을 포괄적으로 관찰하는 방법으로 사용자를 깊이 있게 이해할 수 있는 기회를 제공해 준다. </dd>
<dd>사용자가 스마트문화콘텐츠 앱을 어떻게 사용하는지, 앱이 요구하는 작업들을 사용자가 어떻게 수행하는지 등의 행동을 관찰함으로써 니즈를 파악하는 방법이다</dd>
<dt id="s3">인터뷰 조사의 프로세스</dt>
<dd>예상되는 인터뷰 참여 사용자 규모를 중심으로 다음과 같은 인터뷰 조사 프로세스에 따라 서 일정계획을 수행한다.</dd>
<dt id="s4">관찰조사의 프로세스</dt>
<dd>관찰조사법은 사용자의 실제적 환경에서 자연스럽게 사용자의 행동과 경험을 관찰하는 방 법으로 다음과 같은 프로세스로 진행된다.</dd>
</dl>
</div>
<div class="choice2">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>선택자</em>의 다음 부터 조건까지만 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice2 .off1").on("click", function(e){
e.preventDefault();
$("dd").removeClass("rLine");
});
$(".choice2 .btn1").on("click", function(e){
$("#s1").nextUntil("#s3", "dd").addClass("rLine");
});
</script>
</body>
</html>
호환성(Compatibility)
메서드 | 버전 | 6 | 7 | 8 | 9 | 10 | 11 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
children() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |