테스트 사이트 - 개발 중인 베타 버전입니다
SIR

.end()

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 1289

.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>

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15895
jQuery event.isPropagationStopped ()
15894
jQuery event.isImmediatePropagationStopped ()
15893
jQuery event.isDefaultPrevented()
15888
jQuery event.delegateTarget
15887
jQuery event.data
15886
jQuery .eq( index )
15885
jQuery .end() 현재글
15884
jQuery .empty ()
15883
jQuery .each()
15882
jQuery .die ()
15881
jQuery .detach ([selector])
15880
jQuery .dequeue( [queueName ] )
15878
jQuery .delegate (selector, eventType, handler)
15877
jQuery .delay (duration [, queueName])
15876
jQuery deferred.then (doneFilter [, failFilter] [, progressFilter])
15874
jQuery deferred.state ()
15873
jQuery deferred.resolveWith (context [, args])
15872
jQuery deferred.resolve( [args ] )
15871
PHP http:// 를 https:// 로 이동하는 방법
15866
jQuery deferred.rejectWith (context [, args])
15865
jQuery deferred.reject ([args])
15864
jQuery deferred.promise( [target ] )
15863
jQuery deferred.progress (progressCallbacks [, progressCallbacks])
15862
jQuery deferred.pipe ([doneFilter] [, failFilter])
15861
jQuery deferred.notifyWith( context [, args ] )
15859
jQuery deferred.notify (args)
15858
jQuery deferred.isResolved ()
15857
jQuery deferred.isRejected()
15856
jQuery deferred.fail (failCallbacks [, failCallbacks])
15855
jQuery deferred.done (doneCallbacks [, doneCallbacks])
이전 다음
전체 목록