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

.end()

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

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

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
15969
jQuery .jquery
15968
JavaScript 공휴일을 제외한 시간적용 ON/OFF 스크립트예제 (휴일추가가능)
15967
jQuery .is()
15966
jQuery .insertBefore()
15965
jQuery .insertAfter()
15964
jQuery .innerWidth ()
15963
jQuery .innerHeight ()
15962
jQuery .index()
15961
jQuery jQuery( ":image" )
15960
jQuery jQuery ( "# id")
15959
jQuery .html()
15958
jQuery .hover (handlerIn, handlerOut)
15957
jQuery .hide ()
15956
jQuery jQuery ( ": hidden")
15955
기타 그누보드5 기본쿼리
15954
jQuery .height()
15953
jQuery jQuery ( ": header")
15952
jQuery .hasClass( className )
15949
PHP 네이버 클로버 tts 3
15947
node.js 네이트온 팀룸으로 메일 수신 확인 1
15946
jQuery jQuery ( ": has (selector)")
15945
jQuery attributeHas 선택자
15944
jQuery .has (selector)
15942
jQuery .get (index)
15941
jQuery .focusin (handler)
15940
jQuery .focusin (handler)
15939
jQuery jQuery ( ": focus")
15938
jQuery .focus (handler)
15937
jQuery jQuery( ":first" )
15936
jQuery jQuery ( ": first-of-type")
이전 다음
전체 목록