1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.nextUntil()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/traversing/" title="View all posts in Traversing">Traversing</a> > <a href="http://api.jquery.com/category/traversing/tree-traversal/" title="View all posts in Tree Traversal">Tree Traversal</a></span>
</div>
</div>
<div id="nextUntil1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.nextUntil( [selector] [, filter] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom 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, DOM node, or jQuery object passed.</p>
<ul class="signatures">
<li class="signature" id="nextUntil-selector-filter">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.nextUntil( [selector] [, filter] )</h4>
<p class="arguement"><strong>selector</strong>A string containing a selector expression to indicate where to stop matching following sibling elements.</p>
<p class="arguement"><strong>filter</strong>A string containing a selector expression to match elements against.</p>
</li>
<li class="signature" id="nextUntil-element-filter">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.6/">1.6</a></span>.nextUntil( [element] [, filter] )</h4>
<p class="arguement"><strong>element</strong>A DOM node or jQuery object indicating where to stop matching following sibling elements.</p>
<p class="arguement"><strong>filter</strong>A string containing a selector expression to match elements against.</p>
</li>
</ul>
<div class="longdesc">
<p>Given a selector expression that represents a set of DOM elements, the <code>.nextUntil()</code> method searches 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> argument.</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><strong>As of jQuery 1.6</strong>, A DOM node or jQuery object, instead of a selector, may be passed to the <code>.nextUntil()</code> method.</p>
<p>The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.</p>
</div>
<h3>Example:</h3>
<div class="entry-examples" id="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. Also, find <dd> siblings that follow <dt id="term-1"> up to <dt id="term-3"> and give them a green text color. </span></h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<dl>
<dt id="term-1">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 id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<script>
$("#term-2").nextUntil("dt")
.css("background-color", "red");
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd")
.css("color", "green");
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo" rel="250px"></div>
</div></div>
</div>
</div>
</div>
</body></html>
|