mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-20 07:50:27 +00:00
89 lines
No EOL
4.2 KiB
HTML
89 lines
No EOL
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div class="ui-page">
|
|
<div class="ui-header">
|
|
<h1>.parentsUntil()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="parentsUntil1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.parentsUntil( [ 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 the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.</p>
|
|
<ul class="signatures"><li class="signature" id="parentsUntil-selector">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.parentsUntil( [ selector ] )</h4>
|
|
<p class="arguement"><strong>selector</strong>A string containing a selector expression to indicate where to stop matching ancestor elements.</p>
|
|
</li></ul>
|
|
<div class="longdesc">
|
|
<p>Given a jQuery object that represents a set of DOM elements, the <code>.parentsUntil()</code> method traverses through the ancestors of these elements until it reaches an element matched by the selector passed in the method's argument. The resulting jQuery object contains all of the ancestors up to but not including the one matched by the <code>.parentsUntil()</code> selector. Consider a page with a basic nested list as follows:</p>
|
|
<pre><ul class="level-1">
|
|
<li class="item-i">I</li>
|
|
<li class="item-ii">II
|
|
<ul class="level-2">
|
|
<li class="item-a">A</li>
|
|
<li class="item-b">B
|
|
<ul class="level-3">
|
|
<li class="item-1">1</li>
|
|
<li class="item-2">2</li>
|
|
<li class="item-3">3</li>
|
|
</ul>
|
|
</li>
|
|
<li class="item-c">C</li>
|
|
</ul>
|
|
</li>
|
|
<li class="item-iii">III</li>
|
|
</ul>
|
|
</pre>
|
|
<p>If we begin at item A, we can find its ancestors up to but not including <code><ul class="level-1"></code> as follows:</p>
|
|
<pre>$('li.item-a').parentsUntil('.level-1')
|
|
.css('background-color', 'red');</pre>
|
|
<p>The result of this call is a red background for the level-2 list and the item II. </p>
|
|
<p>If the .parentsUntil() selector is not matched, or if no selector is supplied, the returned jQuery object contains all of the previous jQuery object's ancestors. For example, let's say we begin at item A again, but this time we use a selector that is not matched by any of its ancestors:</p>
|
|
<pre>$('li.item-a').parentsUntil('.not-here')
|
|
.css('background-color', 'red');</pre>
|
|
<p>The result of this call is a red background-color style applied to the level-2 list, the item II, the level-1 list, the <code><body></code> element, and the <code><html></code> element.</p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Find the ancestors of <li class="item-a"> up to <ul class="level-1"> 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>
|
|
|
|
<ul class="level-1">
|
|
<li class="item-i">I</li>
|
|
<li class="item-ii">II
|
|
<ul class="level-2">
|
|
<li class="item-a">A</li>
|
|
<li class="item-b">B
|
|
<ul class="level-3">
|
|
<li class="item-1">1</li>
|
|
<li class="item-2">2</li>
|
|
<li class="item-3">3</li>
|
|
</ul>
|
|
</li>
|
|
<li class="item-c">C</li>
|
|
</ul>
|
|
</li>
|
|
<li class="item-iii">III</li>
|
|
</ul>
|
|
<script>
|
|
$('li.item-a').parentsUntil('.level-1')
|
|
.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> |