mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-19 07:20:24 +00:00
69 lines
No EOL
3.1 KiB
HTML
69 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>.andSelf()</h1>
|
|
|
|
</div>
|
|
<div data-role="content" data-theme="c" id="andSelf1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.andSelf()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Add the previous set of elements on the stack to the current set.</p>
|
|
<ul class="signatures"><li class="signature" id="andSelf"><h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.andSelf()</h4></li></ul>
|
|
<div class="longdesc">
|
|
<p>As described in the discussion for <code>.end()</code> above, jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, <code>.andSelf()</code> can help.</p>
|
|
<p>Consider a page with a simple list on it:</p>
|
|
<pre>
|
|
<ul>
|
|
<li>list item 1</li>
|
|
<li>list item 2</li>
|
|
<li class="third-item">list item 3</li>
|
|
<li>list item 4</li>
|
|
<li>list item 5</li>
|
|
</ul>
|
|
</pre>
|
|
<p>If we begin at the third item, we can find the elements which come after it:</p>
|
|
<pre>$('li.third-item').nextAll().andSelf()
|
|
.css('background-color', 'red');
|
|
</pre>
|
|
<p>The result of this call is a red background behind items 3, 4 and 5. First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to <code>.nextAll()</code> then pushes the set of items 4 and 5 onto the stack. Finally, the <code>.andSelf()</code> invocation merges these two sets together, creating a jQuery object that points to all three items.</p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Find all divs, and all the paragraphs inside of them, and give them both classnames. Notice the div doesn't have the yellow background color since it didn't use andSelf.</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
p, div { margin:5px; padding:5px; }
|
|
.border { border: 2px solid red; }
|
|
.background { background:yellow; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<p>First Paragraph</p>
|
|
<p>Second Paragraph</p>
|
|
</div>
|
|
<script>
|
|
$("div").find("p").andSelf().addClass("border");
|
|
$("div").find("p").addClass("background");
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |