.end() 정보
jQuery .end()본문
.end()
설명 : 현재 체인에서 가장 최근의 필터링 작업을 끝내고 일치하는 요소 집합을 이전 상태로 되돌립니다.
대부분의 jQuery의 DOM 탐색 방법은 jQuery 객체 인스턴스에서 작동하고 새로운 DOM 요소 집합과 일치하는 새로운 인스턴스를 생성합니다. 이 경우 새로운 요소 집합이 개체 내부에서 유지 관리되는 스택으로 푸시되는 것처럼 보입니다. 연속적인 각 필터링 방법은 새 요소 집합을 스택에 푸시합니다. 이전 요소 세트가 필요 end()하면 스택에서 세트를 다시 팝하는 데 사용할 수 있습니다 .
한 페이지에 몇 개의 짧은 목록이 있다고 가정 해보십시오
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
이 end()메소드는 주로 jQuery의 체인 등록 정보를 이용할 때 유용합니다. 연쇄를 사용하지 않을 때는 변수 이름으로 이전 객체를 호출 할 수 있으므로 스택을 조작 할 필요가 없습니다. 로 end()하지만, 우리가 할 수있는 문자열 모든 방법을 함께 호출
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" );
이 체인 foo은 첫 번째 목록에서만 클래스가있는 항목을 검색 하고 배경을 빨간색으로 바꿉니다. 그런 다음 end()호출하기 전 상태로 객체를 반환 find()하므로 두 번째 객체는 해당 목록 내부가 아닌 find()'.bar'를 찾은 다음 일치하는 요소의 배경을 녹색으로 바꿉니다. 최종 결과는 첫 번째 목록의 항목 1과 3이 색이있는 배경을 갖고 두 번째 목록의 항목 중 아무 것도 수행하지 않는다는 것입니다.<ul class="first"><li class="foo">
긴 jQuery 체인은 구조화 된 코드 블록으로 시각화 될 수 있으며 중첩 된 블록의 개구부를 제공하는 필터링 메소드와 end()이를 닫는 메소드가 있습니다.
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" )
.end();
마지막 end()은 jQuery 객체를 바로 버리기 때문에 불필요합니다. 그러나 코드가이 형식으로 작성되면 end()시각적 대칭성과 완성도를 제공하여 최소한 개발자의 눈에는 읽기 쉽도록 프로그램을 작성합니다. 추가 함수 호출.
예 :
모든 단락을 선택하고, 내부의 범위 요소를 찾고, 선택을 단락으로 되 돌립니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>end demo</title>
<style>
p, div {
margin: 1px;
padding: 1px;
font-weight: bold;
font-size: 16px;
}
div {
color: blue;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
Hi there <span>how</span> are you <span>doing</span>?
</p>
<p>
This <span>span</span> is one of
several <span>spans</span> in this
<span>sentence</span>.
</p>
<div>
Tags in jQuery object initially: <b></b>
</div>
<div>
Tags in jQuery object after find: <b></b>
</div>
<div>
Tags in jQuery object after end: <b></b>
</div>
<script>
jQuery.fn.showTags = function( n ) {
var tags = this.map(function() {
return this.tagName;
})
.get()
.join( ", " );
$( "b:eq( " + n + " )" ).text( tags );
return this;
};
$( "p" )
.showTags( 0 )
.find( "span" )
.showTags( 1 )
.css( "background", "yellow" )
.end()
.showTags( 2 )
.css( "font-style", "italic" );
</script>
</body>
</html>
0
댓글 0개