mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-23 09:20:28 +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
48 lines
No EOL
2.5 KiB
HTML
48 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 class="ui-header">
|
|
<h1>:eq() Selector</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="eq1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">eq</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(':eq(index)')</h4>
|
|
<ul class="signatures"><li><dl class="arguments">
|
|
<dt>index</dt>
|
|
<dd>Zero-based index of the element to match.</dd>
|
|
</dl></li></ul>
|
|
<p class="desc"><strong>Description: </strong>Select the element at index n within the matched set.</p>
|
|
<div class="longdesc">
|
|
<p>The index-related selectors (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>) 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 <code>0</code> through <code>3</code> 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:eq(1)')</code> selects the second element in the document with the class myclass, rather than the first. 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 the third td.</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<table border="1">
|
|
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
|
|
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
|
|
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
|
|
</table>
|
|
<script>$("td:eq(2)").css("color", "red");</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |