mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-21 08:20:24 +00:00
f9f236fb8b
In starting markup, pages should now be identified with the attribute data-role="page". This allows us to then add ui-page programatically, hiding all non-active pages, and apply ui-page-active to one page at a time to show it. mobile.js is updated to find pages by this attribute now, instead of ui-page class. fixes issue 32
84 lines
No EOL
3.7 KiB
HTML
84 lines
No EOL
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div class="ui-header">
|
|
<h1>.nextUntil()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="nextUntil1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.nextUntil( [ selector ] )</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>Get all following siblings of each element up to but not including the element matched by the selector.</p>
|
|
<ul class="signatures"><li class="signature" id="nextUntil-selector">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.nextUntil( [ selector ] )</h4>
|
|
<p class="arguement"><strong>selector</strong>A string containing a selector expression to indicate where to stop matching following sibling elements.</p>
|
|
</li></ul>
|
|
<div class="longdesc">
|
|
<p>Given a jQuery object that represents a set of DOM elements, the <code>.nextUntil()</code> method allows us to search through the successors of these elements in the DOM tree, stopping when it reaches an element matched by the method's argument. The new jQuery object that is returned contains all following siblings up to but not including the one matched by the <code>.nextUntil()</code> selector.</p>
|
|
<p>If the selector is not matched or is not supplied, all following siblings will be selected; in these cases it selects the same elements as the <code>.nextAll()</code> method does when no filter selector is provided.</p>
|
|
<p>Consider a page with a simple definition list as follows:</p>
|
|
<pre>
|
|
<dl>
|
|
<dt>term 1</dt>
|
|
<dd>definition 1-a</dd>
|
|
<dd>definition 1-b</dd>
|
|
<dd>definition 1-c</dd>
|
|
<dd>definition 1-d</dd>
|
|
|
|
<dt id="term-2">term 2</dt>
|
|
<dd>definition 2-a</dd>
|
|
<dd>definition 2-b</dd>
|
|
<dd>definition 2-c</dd>
|
|
|
|
<dt>term 3</dt>
|
|
<dd>definition 3-a</dd>
|
|
<dd>definition 3-b</dd>
|
|
</dl>
|
|
</pre>
|
|
<p>If we begin at the second term, we can find the elements which come after it until a following <code><dt></code>.</p>
|
|
<pre>$('#term-2').nextUntil('dt').css('background-color', 'red');</pre>
|
|
<p>The result of this call is a red background behind definitions <code>2-a</code>, <code>2-b</code>, and <code>2-c</code>. </p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Find the siblings that follow <dt id="term-2"> up to the next <dt> and give them a red background color.</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<dl>
|
|
<dt>term 1</dt>
|
|
<dd>definition 1-a</dd>
|
|
<dd>definition 1-b</dd>
|
|
<dd>definition 1-c</dd>
|
|
<dd>definition 1-d</dd>
|
|
|
|
<dt id="term-2">term 2</dt>
|
|
<dd>definition 2-a</dd>
|
|
<dd>definition 2-b</dd>
|
|
<dd>definition 2-c</dd>
|
|
|
|
<dt>term 3</dt>
|
|
<dd>definition 3-a</dd>
|
|
<dd>definition 3-b</dd>
|
|
</dl>
|
|
<script>
|
|
$("#term-2").nextUntil("dt")
|
|
.css("background-color", "red")
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |