제이쿼리 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>
'IT > 제이쿼리' 카테고리의 다른 글
| 제이쿼리 .attr (attributeName) (0) | 2017.08.06 |
|---|---|
| 제이쿼리 .appendTo( target ) (0) | 2017.08.06 |
| 제이쿼리 all selector (0) | 2017.08.03 |
| 제이쿼리 .ajaxSuccess(handler) (0) | 2017.08.03 |
| 제이쿼리 .ajaxStop(handler ) (0) | 2017.08.02 |