Skip to content

Commit 07081c0

Browse files
agcolomagcolom
committed
api docs: code indentation and formatting (eq-selector)
1 parent 0771cc7 commit 07081c0

File tree

1 file changed

+32
-26
lines changed

1 file changed

+32
-26
lines changed

‎entries/eq-selector.xml

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,39 +18,44 @@
1818
<desc>Select the element at index <code>n</code> within the matched set.</desc>
1919
<longdesc>
2020
<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>
21-
<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>
21+
<p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$( ".myclass:eq(2)" )</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>
2222
<p>Prior to jQuery 1.8, the <code>:eq(index)</code> selector did <em>not</em> accept a negative value for <code>index</code> (though the <a href="/eq/"><code>.eq(index)</code></a> method did).</p>
2323
</longdesc>
2424
<note id="jquery-selector-extension-alt" type="additional" data-selector=":eq()" data-alt="$(&quot;your-pure-css-selector&quot;).eq(index)"/>
2525
<example>
2626
<desc>Finds the third td.</desc>
27-
<code><![CDATA[$("td:eq(2)").css("color", "red");]]></code>
28-
<html><![CDATA[<table border="1">
27+
<code><![CDATA[
28+
$( "td:eq( 2 )" ).css( "color", "red" );
29+
]]></code>
30+
<html><![CDATA[
31+
<table border="1">
2932
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
3033
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
3134
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
32-
</table>]]></html>
35+
</table>
36+
]]></html>
3337
</example>
3438
<example>
3539
<height>160</height>
3640
<desc>Apply three different styles to list items to demonstrate that <code>:eq()</code> is designed to select a single element while <code>:nth-child()</code> or <code>:eq()</code> within a looping construct such as <code>.each()</code> can select multiple elements.</desc>
3741
<code><![CDATA[
38-
/* applies yellow background color to a single <li> */
39-
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
42+
// Applies yellow background color to a single <li>
43+
$( "ul.nav li:eq( 1 )" ).css( "backgroundColor", "#ff0" );
4044
41-
/* applies italics to text of the second <li> within each <ul class="nav"> */
42-
$("ul.nav").each(function(index) {
43-
$(this).find("li:eq(1)").css( "fontStyle", "italic" );
45+
// Applies italics to text of the second <li> within each <ul class="nav">
46+
$( "ul.nav" ).each(function( index ) {
47+
$( this ).find( "li:eq( 1 )" ).css( "fontStyle", "italic" );
4448
});
4549
46-
/* applies red text color to descendants of <ul class="nav"> */
47-
/* for each <li> that is the second child of its parent */
48-
$("ul.nav li:nth-child(2)").css( "color", "red" );
50+
// Applies red text color to descendants of <ul class="nav">
51+
// for each <li> that is the second child of its parent
52+
$( "ul.nav li:nth-child( 2 )" ).css( "color", "red" );
4953
]]></code>
50-
<html><![CDATA[<ul class="nav">
51-
<li>List 1, item 1</li>
52-
<li>List 1, item 2</li>
53-
<li>List 1, item 3</li>
54+
<html><![CDATA[
55+
<ul class="nav">
56+
<li>List 1, item 1</li>
57+
<li>List 1, item 2</li>
58+
<li>List 1, item 3</li>
5459
</ul>
5560
<ul class="nav">
5661
<li>List 2, item 1</li>
@@ -62,18 +67,19 @@ $("ul.nav li:nth-child(2)").css( "color", "red" );
6267
<example>
6368
<desc>Add a class to List 2, item 2 by targeting the second to last &lt;li&gt; </desc>
6469
<css><![CDATA[
65-
.foo {
66-
color: blue;
67-
background-color: yellow;
68-
}
70+
.foo {
71+
color: blue;
72+
background-color: yellow;
73+
}
6974
]]></css>
7075
<code><![CDATA[
71-
$( "li:eq(-2)" ).addClass( "foo" )
72-
]]></code>
73-
<html><![CDATA[<ul class="nav">
74-
<li>List 1, item 1</li>
75-
<li>List 1, item 2</li>
76-
<li>List 1, item 3</li>
76+
$( "li:eq( -2 )" ).addClass( "foo" )
77+
]]></code>
78+
<html><![CDATA[
79+
<ul class="nav">
80+
<li>List 1, item 1</li>
81+
<li>List 1, item 2</li>
82+
<li>List 1, item 3</li>
7783
</ul>
7884
<ul class="nav">
7985
<li>List 2, item 1</li>

0 commit comments

Comments
 (0)