ドキュメント

Traversing/end

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

end( )

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
If there was no destructive operation before, an empty set is returned. A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings, and slice - plus the clone, appendTo, prependTo, insertBefore, insertAfter, and replaceAll functions (from Manipulation).
Examples:

Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

    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");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    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>
  <style>
  p, div { margin:1px; padding:1px; font-weight:bold; 
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
</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>
</body>
</html>

Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

$("p").find("span").end().css("border", "2px red solid");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").find("span").end().css("border", "2px red solid");
  });
  </script>
  <style>p { margin:10px; padding:10px; }</style>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
</body>
</html>

NameType