제이쿼리 andSelf()
제이쿼리 andSelf()
설명 : 스택의 이전 요소 세트를 현재 세트에 추가하십시오.
참고 : 이 함수는 더 이상 사용되지 않으며 .addBack()jQuery 1.8 이상에서 사용해야 하는 별칭입니다 .
위의 설명에서 설명한 것처럼 .end()jQuery 객체는 일치하는 요소 집합에 대한 변경 사항을 추적하는 내부 스택을 유지 관리합니다. DOM 탐색 메서드 중 하나가 호출되면 새 요소 집합이 스택에 푸시됩니다. 이전 요소 세트도 원할 경우 .andSelf()도움이 될 수 있습니다.
간단한 목록이있는 페이지를 고려하십시오.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
다음 코드의 결과는 항목 3, 4 및 5 뒤에 빨간색 배경이됩니다.
$( "li.third-item" ).nextAll().andSelf()
.css( "background-color", "red" );
먼저, 초기 선택기는 항목 3을 찾고이 항목 만 포함하는 세트로 스택을 초기화합니다. .nextAll()그런 다음 호출 은 항목 4와 5의 세트를 스택으로 푸시합니다. 마지막으로 .andSelf()호출은이 두 세트를 병합하여 문서 순서로 세 항목 모두를 가리키는 jQuery 객체를 만듭니다 [ <li.third-item>, <li>, <li> ].
예:
이 .andSelf()메서드는 순회 스택의 이전 DOM 요소 집합을 현재 집합에 추가합니다. 첫 번째 예에서 최상위 스택에는 다음과 같은 결과 집합이 포함됩니다 .find("p"). 두 번째 예에서는 .andSelf()스택에있는 이전 요소 집합 (이 경우) $( "div.after-andself" )을 div 및 닫힌 단락을 모두 선택하여 현재 집합에 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>andSelf demo</title>
<style>
p, div {
margin: 5px;
padding: 5px;
}
.border {
border: 2px solid red;
}
.background {
background: yellow;
}
.left, .right {
width: 45%;
float: left;
}
.right {
margin-left: 3%;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="left">
<p><strong>Before <code>andSelf()</code></strong></p>
<div class="before-andself">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>andSelf()</code></strong></p>
<div class="after-andself">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
// First Example
$( "div.before-andself" ).find( "p" ).addClass( "background" );
// Second Example
$( "div.after-andself" ).find( "p" ).andSelf().addClass( "background" );
</script>
</body>
</html>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5306 | JavaScript |
niceguys
|
2년 전 | 1224 | |
| 5305 | JavaScript |
niceguys
|
2년 전 | 1120 | |
| 5304 | PHP |
niceguys
|
2년 전 | 747 | |
| 5303 | JavaScript |
|
2년 전 | 1314 | |
| 5302 | PHP |
|
2년 전 | 809 | |
| 5301 | JavaScript |
techstar
|
2년 전 | 620 | |
| 5300 | PHP |
techstar
|
2년 전 | 675 | |
| 5299 | jQuery | 2년 전 | 702 | ||
| 5298 | JavaScript | 2년 전 | 637 | ||
| 5297 | 기타 |
시우시우9082
|
2년 전 | 1113 | |
| 5296 | 기타 |
|
2년 전 | 802 | |
| 5295 | PHP | 2년 전 | 1139 | ||
| 5294 | JavaScript |
swallow
|
2년 전 | 1905 | |
| 5293 | JavaScript |
swallow
|
2년 전 | 820 | |
| 5292 | JavaScript |
swallow
|
2년 전 | 1009 | |
| 5291 | JavaScript |
swallow
|
2년 전 | 697 | |
| 5290 | PHP |
swallow
|
2년 전 | 800 | |
| 5289 | PHP |
swallow
|
2년 전 | 820 | |
| 5288 | JavaScript |
swallow
|
2년 전 | 834 | |
| 5287 |
swallow
|
2년 전 | 1374 | ||
| 5286 | 2년 전 | 1583 | |||
| 5285 | 2년 전 | 1308 | |||
| 5284 | 2년 전 | 1724 | |||
| 5283 | 2년 전 | 1750 | |||
| 5282 | 2년 전 | 1441 | |||
| 5281 |
|
2년 전 | 1741 | ||
| 5280 | 2년 전 | 1174 | |||
| 5279 | 2년 전 | 1811 | |||
| 5278 | JavaScript | 2년 전 | 1614 | ||
| 5277 | 2년 전 | 1409 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기