제이쿼리 .addBack ()
제이쿼리 .addBack ()
스택의 이전 요소 세트를 현재 세트에 추가하고 선택적으로 선택기로 필터링합니다.
위의 설명에서 설명한 것처럼 .end()jQuery 객체는 일치하는 요소 집합에 대한 변경 사항을 추적하는 내부 스택을 유지 관리합니다.
DOM 탐색 메서드 중 하나가 호출되면 새 요소 집합이 스택에 푸시됩니다. 이전 요소 세트도 원할 경우 .addBack()도움이 될 수 있습니다.
간단한 목록이있는 페이지를 고려하십시오.
<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().addBack()
.css( "background-color", "red" );
먼저, 초기 선택기는 항목 3을 찾고이 항목 만 포함하는 세트로 스택을 초기화합니다. .nextAll()그런 다음 호출 은 항목 4와 5의 세트를 스택으로 푸시합니다.
마지막으로 .addBack()호출은이 두 세트를 병합하여 문서 순서로 세 항목 모두를 가리키는 jQuery 객체를 만듭니다 {[<li.third-item>,<li>,<li> ]}.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addBack 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>addBack()</code></strong></p>
<div class="before-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<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-addback" ).find( "p" ).addClass( "background" );
// Second Example
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
</body>
</html>