Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-30 19:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
jquery-mobile/experiments/api-viewer/docs/nth-child-selector/index.html

142 lines
5.7 KiB
HTML
Raw Normal View History

added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
set utf-8
2010-11-02 01:46:29 +00:00
<html lang='en'><head>
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags.
2011-02-18 20:00:18 +00:00
<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>
Big update: 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
2010-09-18 16:20:35 +00:00
<div data-role="page">
updated markup to use data-role attrs in place of classes for header/content/footer
2010-09-21 14:58:54 +00:00
<div data-role="header">
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<h1>:nth-child Selector</h1>
</div>
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161
2010-10-12 19:50:28 +00:00
<div data-role="content" data-theme="c" id="nth-child1">
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<h2 class="jq-clearfix roundTop section-title">
<span class="name">nth-child</span> selector</h2>
<div class=" entry-details">
<h4 class="name">
<span class="versionAdded">version added: <a href="/version/1.1.4/">1.1.4</a></span>jQuery(':nth-child(index/even/odd/equation)')</h4>
<ul class="signatures"><li><dl class="arguments">
<dt>index</dt>
<dd>The index of each child to match, starting with <code>1</code>, the string <code>even</code> or <code>odd</code>, or an equation ( eg. <code>:nth-child(even)</code>, <code>:nth-child(4n)</code> )</dd>
</dl></li></ul>
<p class="desc"><strong>Description: </strong>Selects all elements that are the nth-child of their parent.</p>
<div class="longdesc">
<p>Because jQuery's implementation of <code>:nth-child(n)</code> is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting. Therefore, given a single <code>&lt;ul&gt;</code> containing two <code>&lt;li&gt;</code>s, <code>$('li:nth-child(1)')</code> selects the first <code>&lt;li&gt;</code> while <code>$('li:eq(1)')</code> selects the second.</p>
<p>The <code>:nth-child(n)</code> pseudo-class is easily confused with <code>:eq(n)</code>, even though the two can result in dramatically different matched elements. With <code>:nth-child(n)</code>, all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With <code>:eq(n)</code> only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the nth one is selected.</p>
<p>Further discussion of this unusual usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS specification</a>.</p>
</div>
<h3>Examples:</h3>
<div id="entry-examples" class="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Finds the second li in each matched ul and notes it.</span>
</h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
div { float:left; }
span { color:blue; }
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;ul&gt;
&lt;li&gt;John&lt;/li&gt;
&lt;li&gt;Karl&lt;/li&gt;
&lt;li&gt;Brandon&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
&lt;div&gt;&lt;ul&gt;
&lt;li&gt;Sam&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
&lt;div&gt;&lt;ul&gt;
&lt;li&gt;Glen&lt;/li&gt;
&lt;li&gt;Tane&lt;/li&gt;
&lt;li&gt;Ralph&lt;/li&gt;
&lt;li&gt;David&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
&lt;script&gt;$("ul li:nth-child(2)").append("&lt;span&gt; - 2nd!&lt;/span&gt;");&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...</span>
</h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
button { display:block; font-size:12px; width:100px; }
div { float:left; margin:10px; font-size:10px;
border:1px solid black; }
span { color:blue; font-size:18px; }
#inner { color:red; }
td { width:50px; text-align:center; }
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;button&gt;:nth-child(even)&lt;/button&gt;
&lt;button&gt;:nth-child(odd)&lt;/button&gt;
&lt;button&gt;:nth-child(3n)&lt;/button&gt;
&lt;button&gt;:nth-child(2)&lt;/button&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;button&gt;:nth-child(3n+1)&lt;/button&gt;
&lt;button&gt;:nth-child(3n+2)&lt;/button&gt;
&lt;button&gt;:even&lt;/button&gt;
&lt;button&gt;:odd&lt;/button&gt;
&lt;/div&gt;
&lt;div&gt;&lt;table&gt;
&lt;tr&gt;&lt;td&gt;John&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Karl&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Brandon&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Benjamin&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;div&gt;&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Sam&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;div&gt;&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Glen&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Tane&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Ralph&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;David&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Mike&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Dan&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;span&gt;
tr&lt;span id="inner"&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;script&gt;
$("button").click(function () {
var str = $(this).text();
$("tr").css("background", "white");
$("tr" + str).css("background", "#ff0000");
$("#inner").text(str);
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Reference in a new issue Copy permalink