1 line
4.5 KiB
JSON
1 line
4.5 KiB
JSON
{"name":"end","type":"method","title":".end()","deprecated":null,"removed":null,"desc":"End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.","categories":["traversing/miscellaneous-traversal","version/1.0"],"entries":[{"return":"jQuery","signatures":{"added":"1.0"},"examples":[{"desc":"Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.","code":"\njQuery.fn.showTags = function( n ) {\n var tags = this.map(function() {\n return this.tagName;\n })\n .get()\n .join( \", \" );\n $( \"b:eq( \" + n + \" )\" ).text( tags );\n return this;\n};\n\n$( \"p\" )\n .showTags( 0 )\n .find( \"span\" )\n .showTags( 1 )\n .css( \"background\", \"yellow\" )\n .end()\n .showTags( 2 )\n .css( \"font-style\", \"italic\" );\n","css":"\n p, div {\n margin: 1px;\n padding: 1px;\n font-weight: bold;\n font-size: 16px;\n }\n div {\n color: blue;\n }\n b {\n color: red;\n }\n","html":"\n<p>\n Hi there <span>how</span> are you <span>doing</span>?\n</p>\n\n<p>\n This <span>span</span> is one of\n several <span>spans</span> in this\n <span>sentence</span>.\n</p>\n\n<div>\n Tags in jQuery object initially: <b></b>\n</div>\n\n<div>\n Tags in jQuery object after find: <b></b>\n</div>\n\n<div>\n Tags in jQuery object after end: <b></b>\n</div>\n"},{"desc":"Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.","code":"\n$( \"p\" )\n .find( \"span\" )\n .end()\n .css( \"border\", \"2px red solid\" );\n","css":"\n p {\n margin: 10px;\n padding: 10px;\n }\n","html":"\n<p><span>Hello</span>, how are you?</p>\n"}],"longdesc":"\n <p>Most of jQuery's <a href=\"/category/traversing/\">DOM traversal</a> methods operate on a jQuery object instance and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use <code>end()</code> to pop the sets back off of the stack.</p>\n <p>Suppose we have a couple short lists on a page:</p>\n <pre><code>\n<ul class=\"first\">\n <li class=\"foo\">list item 1</li>\n <li>list item 2</li>\n <li class=\"bar\">list item 3</li>\n</ul>\n<ul class=\"second\">\n <li class=\"foo\">list item 1</li>\n <li>list item 2</li>\n <li class=\"bar\">list item 3</li>\n</ul>\n </code></pre>\n <p>The <code>end()</code> method is useful primarily when exploiting jQuery's chaining properties. When not using chaining, we can usually just call up a previous object by variable name, so we don't need to manipulate the stack. With <code>end()</code>, though, we can string all the method calls together:</p>\n <pre><code>\n$( \"ul.first\" )\n .find( \".foo\" )\n .css( \"background-color\", \"red\" )\n .end()\n .find( \".bar\" )\n .css( \"background-color\", \"green\" );\n </code></pre>\n <p>This chain searches for items with the class <code>foo</code> within the first list only and turns their backgrounds red. Then <code>end()</code> returns the object to its state before the call to <code>find()</code>, so the second <code>find()</code> looks for '.bar' inside <code><ul class=\"first\"></code>, not just inside that list's <code><li class=\"foo\"></code>, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.</p>\n <p>A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and <code>end()</code> methods closing them:</p>\n <pre><code>\n$( \"ul.first\" )\n .find( \".foo\" )\n .css( \"background-color\", \"red\" )\n .end()\n .find( \".bar\" )\n .css( \"background-color\", \"green\" )\n .end();\n </code></pre>\n <p>The last <code>end()</code> is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the <code>end()</code> provides visual symmetry and a sense of completion —making the program, at least to the eyes of some developers, more readable, at the cost of a slight hit to performance as it is an additional function call.</p>\n "}]} |