jquery-mobile/experiments/api-viewer/docs/lt-selector/index.html
scottjehl b11a45f615 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 15:50:28 -04:00

51 lines
No EOL
2.5 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 data-role="header">
<h1>:lt() Selector</h1>
</div>
<div data-role="content" data-theme="c" id="lt1">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">lt</span> selector</h2>
<div class=" entry-details">
<h4 class="name">
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':lt(index)')</h4>
<ul class="signatures"><li><dl class="arguments">
<dt>index</dt>
<dd>Zero-based index.</dd>
</dl></li></ul>
<p class="desc"><strong>Description: </strong>Select all elements at an index less than index within the matched set.</p>
<div class="longdesc">
<p><strong>index-related selectors</strong></p>
<p>The index-related selectors (including this "less than" selector) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (<code>.myclass</code>) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.</p>
<p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$('.myclass:lt(1)')</code> selects the first element in the document with the class <code>myclass</code>, rather than selecting no elements. In contrast, <code>:nth-child(n)</code> uses <em>1-based indexing</em> to conform to the CSS specification.</p>
</div>
<h3>Example:</h3>
<div id="entry-examples" class="entry-examples"><div id="example-0">
<h4><span class="desc">Finds TDs less than the one with the 4th index (TD#4).</span></h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table border="1"&gt;
&lt;tr&gt;&lt;td&gt;TD #0&lt;/td&gt;&lt;td&gt;TD #1&lt;/td&gt;&lt;td&gt;TD #2&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TD #3&lt;/td&gt;&lt;td&gt;TD #4&lt;/td&gt;&lt;td&gt;TD #5&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TD #6&lt;/td&gt;&lt;td&gt;TD #7&lt;/td&gt;&lt;td&gt;TD #8&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;script&gt;$("td:lt(4)").css("color", "red");&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>