Skip to content

Commit 79a8dbf

Browse files
agcolomagcolom
committed
api docs: code indentation and formatting (find to h entries)
1 parent b9cd6ba commit 79a8dbf

22 files changed

+707
-465
lines changed

‎entries/find.xml

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -42,77 +42,101 @@
4242
</li>
4343
<li class="item-iii">III</li>
4444
</ul>
45-
</code></pre>
45+
</code></pre>
4646
<p>If we begin at item II, we can find list items within it:</p>
47-
<pre><code>$('li.item-ii').find('li').css('background-color', 'red');</code></pre>
47+
<pre><code>
48+
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
49+
</code></pre>
4850
<p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>
4951
<div class="warning">
5052
<p>Unlike in the rest of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</p>
5153
</div>
52-
<p><a href="http://api.jquery.com/jquery/#selector-context">Selector context</a> is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$('li.item-ii').find('li')</code> is equivalent to <code>$('li', 'li.item-ii')</code>.</p>
54+
<p><a href="/jquery/#selector-context">Selector context</a> is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$( "li.item-ii" ).find( "li" )</code> is equivalent to <code>$( "li", "li.item-ii" )</code>.</p>
5355
<p><strong>As of jQuery 1.6</strong>, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:</p>
54-
<pre><code>var $allListElements = $('li');</code></pre>
56+
<pre><code>
57+
var $allListElements = $( "li" );
58+
</code></pre>
5559
<p>And then pass this jQuery object to find:</p>
56-
<pre><code>$('li.item-ii').find( $allListElements );</code></pre>
60+
<pre><code>
61+
$( "li.item-ii" ).find( $allListElements );
62+
</code></pre>
5763
<p>This will return a jQuery collection which contains only the list elements that are descendants of item II.</p>
5864
<p>Similarly, an element may also be passed to find:</p>
5965
<pre><code>
60-
var item1 = $('li.item-1')[0];
61-
$('li.item-ii').find( item1 ).css('background-color', 'red');
62-
</code></pre>
66+
var item1 = $( "li.item-1" )[ 0 ];
67+
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
68+
</code></pre>
6369
<p>The result of this call would be a red background on item 1.</p>
6470
</longdesc>
6571
<example>
6672
<desc>Starts with all paragraphs and searches for descendant span elements, same as $("p span")</desc>
6773
<code><![CDATA[
68-
$("p").find("span").css('color','red');
74+
$( "p" ).find( "span" ).css( "color", "red" );
6975
]]></code>
70-
<html><![CDATA[<p><span>Hello</span>, how are you?</p>
71-
<p>Me? I'm <span>good</span>.</p>]]></html>
76+
<html><![CDATA[
77+
<p><span>Hello</span>, how are you?</p>
78+
<p>Me? I'm <span>good</span>.</p>
79+
]]></html>
7280
</example>
7381
<example>
7482
<desc>A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.</desc>
7583
<css><![CDATA[
76-
span { color: blue; }
77-
]]></css>
84+
span {
85+
color: blue;
86+
}
87+
]]></css>
7888
<code><![CDATA[
79-
var $spans = $('span');
80-
$("p").find( $spans ).css('color','red');
89+
var $spans = $( "span" );
90+
$( "p" ).find( $spans ).css( "color", "red" );
8191
]]></code>
82-
<html><![CDATA[<p><span>Hello</span>, how are you?</p>
83-
<p>Me? I'm <span>good</span>.</p>
84-
<div>Did you <span>eat</span> yet?</div>]]></html>
92+
<html><![CDATA[
93+
<p><span>Hello</span>, how are you?</p>
94+
<p>Me? I'm <span>good</span>.</p>
95+
<div>Did you <span>eat</span> yet?</div>
96+
]]></html>
8597
</example>
8698
<example>
8799
<desc>Add spans around each word then add a hover and italicize words with the letter <strong>t</strong>.</desc>
88100
<code><![CDATA[
89-
var newText = $("p").text().split(" ").join("</span> <span>");
90-
newText = "<span>" + newText + "</span>";
101+
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
102+
newText = "<span>" + newText + "</span>";
91103
92-
$("p").html( newText )
93-
.find('span')
94-
.hover(function() {
95-
$(this).addClass("hilite");
96-
},
97-
function() { $(this).removeClass("hilite");
104+
$( "p" ).html( newText )
105+
.find( "span" )
106+
.hover(function() {
107+
$( this ).addClass( "hilite" );
108+
}, function() {
109+
$( this ).removeClass( "hilite" );
98110
})
99111
.end()
100-
.find(":contains('t')")
101-
.css({"font-style":"italic", "font-weight":"bolder"});
102-
112+
.find( ":contains('t')" )
113+
.css({
114+
"font-style":"italic",
115+
"font-weight":"bolder"
116+
});
103117
]]></code>
104118
<css><![CDATA[
105-
p { font-size:20px; width:200px; cursor:default;
106-
color:blue; font-weight:bold; margin:0 10px; }
107-
.hilite { background:yellow; }
108-
]]></css>
109-
<html><![CDATA[<p>
119+
p {
120+
font-size: 20px;
121+
width: 200px;
122+
cursor: default;
123+
color: blue;
124+
font-weight: bold;
125+
margin: 0 10px;
126+
}
127+
.hilite {
128+
background: yellow;
129+
}
130+
]]></css>
131+
<html><![CDATA[
132+
<p>
110133
When the day is short
111134
find that which matters to you
112135
or stop believing
113-
</p>]]></html>
136+
</p>
137+
]]></html>
114138
</example>
115139
<category slug="traversing/tree-traversal"/>
116140
<category slug="version/1.0"/>
117141
<category slug="version/1.6"/>
118-
</entry>
142+
</entry>

‎entries/finish.xml

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,43 +19,42 @@
1919
<example>
2020
<desc>Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.</desc>
2121
<code><![CDATA[
22-
var horiz = $("#path").width() - 20,
23-
vert = $("#path").height() - 20;
22+
var horiz = $( "#path" ).width() - 20,
23+
vert = $( "#path" ).height() - 20;
2424
2525
var btns = {
2626
bstt: function () {
27-
$("div.box").stop(true, true);
27+
$( "div.box" ).stop( true, true );
2828
},
2929
bs: function () {
30-
$("div.box").stop();
30+
$( "div.box" ).stop();
3131
},
3232
bsft: function () {
33-
$("div.box").stop(false, true);
33+
$( "div.box" ).stop( false, true );
3434
},
3535
bf: function () {
36-
$("div.box").finish();
36+
$( "div.box" ).finish();
3737
},
3838
bcf: function () {
39-
$("div.box").clearQueue().finish();
39+
$( "div.box" ).clearQueue().finish();
4040
},
4141
bsff: function () {
42-
$("div.box").stop(false, false);
42+
$( "div.box" ).stop( false, false );
4343
},
4444
bstf: function () {
45-
$("div.box").stop(true, false);
45+
$( "div.box" ).stop( true, false );
4646
},
4747
bcs: function () {
48-
$("div.box").clearQueue().stop();
48+
$( "div.box" ).clearQueue().stop();
4949
}
5050
};
5151
52-
53-
$("button.b").on("click", function () {
54-
btns[this.id]();
52+
$( "button.b" ).on( "click", function () {
53+
btns[ this.id ]();
5554
});
5655
57-
$("#go").on("click", function () {
58-
$(".box")
56+
$( "#go" ).on( "click", function () {
57+
$( ".box" )
5958
.clearQueue()
6059
.stop()
6160
.css({
@@ -64,29 +63,30 @@ $("#go").on("click", function () {
6463
})
6564
.animate({
6665
top: vert
67-
}, 3000)
66+
}, 3000 )
6867
.animate({
6968
left: horiz
70-
}, 3000)
69+
}, 3000 )
7170
.animate({
7271
top: 10
73-
}, 3000);
72+
}, 3000 );
7473
});
7574
]]></code>
76-
<html><![CDATA[<div class="box"></div>
75+
<html><![CDATA[
76+
<div class="box"></div>
7777
<div id="path">
7878
<button id="go">Go</button>
7979
<br>
80-
<button id="bstt" class="b">.stop(true,true)</button>
80+
<button id="bstt" class="b">.stop( true,true )</button>
8181
<button id="bcf" class="b">.clearQueue().finish()</button>
8282
<br>
83-
<button id="bstf" class="b">.stop(true, false)</button>
83+
<button id="bstf" class="b">.stop( true, false )</button>
8484
<button id="bcs" class="b">.clearQueue().stop()</button>
8585
<br>
86-
<button id="bsff" class="b">.stop(false, false)</button>
86+
<button id="bsff" class="b">.stop( false, false )</button>
8787
<button id="bs" class="b">.stop()</button>
8888
<br>
89-
<button id="bsft" class="b">.stop(false, true)</button>
89+
<button id="bsft" class="b">.stop( false, true )</button>
9090
<br>
9191
<button id="bf" class="b">.finish()</button>
9292
</div>

‎entries/first-child-selector.xml

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,41 @@
77
</signature>
88
<desc>Selects all elements that are the first child of their parent.</desc>
99
<longdesc>
10-
<p>While <a href="/first-selector">:first</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
10+
<p>While <a href="/first-selector/">:first</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
1111
</longdesc>
1212
<example>
1313
<desc>Finds the first span in each matched div to underline and add a hover state.</desc>
1414
<code><![CDATA[
15-
$("div span:first-child")
16-
.css("text-decoration", "underline")
17-
.hover(function () {
18-
$(this).addClass("sogreen");
19-
}, function () {
20-
$(this).removeClass("sogreen");
21-
});
15+
$( "div span:first-child" )
16+
.css( "text-decoration", "underline" )
17+
.hover(function () {
18+
$( this ).addClass( "sogreen" );
19+
}, function () {
20+
$( this ).removeClass( "sogreen" );
21+
});
2222
]]></code>
2323
<css><![CDATA[
24-
span { color:#008; }
25-
span.sogreen { color:green; font-weight: bolder; }
26-
]]></css>
27-
<html><![CDATA[<div>
28-
<span>John,</span>
29-
<span>Karl,</span>
30-
<span>Brandon</span>
31-
32-
</div>
33-
<div>
34-
<span>Glen,</span>
35-
<span>Tane,</span>
36-
<span>Ralph</span>
37-
38-
</div>]]></html>
24+
span {
25+
color: #008;
26+
}
27+
span.sogreen {
28+
color: green;
29+
font-weight: bolder;
30+
}
31+
]]></css>
32+
<html><![CDATA[
33+
<div>
34+
<span>John,</span>
35+
<span>Karl,</span>
36+
<span>Brandon</span>
37+
</div>
38+
<div>
39+
<span>Glen,</span>
40+
<span>Tane,</span>
41+
<span>Ralph</span>
42+
</div>
43+
]]></html>
3944
</example>
4045
<category slug="selectors/child-filter-selectors"/>
4146
<category slug="version/1.1.4"/>
42-
</entry>
47+
</entry>

‎entries/first-of-type-selector.xml

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,29 @@
1212
<example>
1313
<desc>Find the first span in each matched div and add a class to it.</desc>
1414
<code><![CDATA[
15-
$("span:first-of-type").addClass("fot");
15+
$( "span:first-of-type" ).addClass( "fot" );
1616
]]></code>
1717
<css><![CDATA[
18-
span.fot { color: red; font-size: 120%; font-style: italic; }
19-
]]></css>
20-
<html><![CDATA[<div>
21-
<span>Corey,</span>
22-
<span>Yehuda,</span>
23-
<span>Adam,</span>
24-
<span>Todd</span>
25-
</div>
26-
<div>
27-
<b>Nobody,</b>
28-
<span>Jörn,</span>
29-
<span>Scott,</span>
30-
<span>Timo</span>
31-
</div>]]></html>
18+
span.fot {
19+
color: red;
20+
font-size: 120%;
21+
font-style: italic;
22+
}
23+
]]></css>
24+
<html><![CDATA[
25+
<div>
26+
<span>Corey,</span>
27+
<span>Yehuda,</span>
28+
<span>Adam,</span>
29+
<span>Todd</span>
30+
</div>
31+
<div>
32+
<b>Nobody,</b>
33+
<span>Jörn,</span>
34+
<span>Scott,</span>
35+
<span>Timo</span>
36+
</div>
37+
]]></html>
3238
</example>
3339
<category slug="selectors/child-filter-selectors"/>
3440
<category slug="version/1.9"/>

‎entries/first-selector.xml

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,30 @@
77
</signature>
88
<desc>Selects the first matched element.</desc>
99
<longdesc>
10-
<p>The <code>:first</code> pseudo-class is equivalent to <code>:eq(0)</code>. It could also be written as <code>:lt(1)</code>. While this matches only a single element, <a href="first-child-selector">:first-child</a> can match more than one: One for each parent.</p>
10+
<p>The <code>:first</code> pseudo-class is equivalent to <code>:eq( 0 )</code>. It could also be written as <code>:lt( 1 )</code>. While this matches only a single element, <a href="/first-child-selector/">:first-child</a> can match more than one: One for each parent.</p>
1111
</longdesc>
1212
<note id="jquery-selector-extension" type="additional" data-selector=":first"/>
1313
<note id="document-order" type="additional"/>
1414
<example>
1515
<desc>Finds the first table row.</desc>
16-
<code><![CDATA[$("tr:first").css("font-style", "italic");]]></code>
16+
<code><![CDATA[
17+
$( "tr:first" ).css( "font-style", "italic" );
18+
]]></code>
1719
<css><![CDATA[
18-
19-
td { color:blue; font-weight:bold; }
20-
]]></css>
21-
<html><![CDATA[<table>
22-
<tr><td>Row 1</td></tr>
23-
<tr><td>Row 2</td></tr>
24-
25-
<tr><td>Row 3</td></tr>
26-
</table>]]></html>
20+
td {
21+
color: blue;
22+
font-weight: bold;
23+
}
24+
]]></css>
25+
<html><![CDATA[
26+
<table>
27+
<tr><td>Row 1</td></tr>
28+
<tr><td>Row 2</td></tr>
29+
<tr><td>Row 3</td></tr>
30+
</table>
31+
]]></html>
2732
</example>
2833
<category slug="selectors/basic-filter-selectors"/>
2934
<category slug="selectors/jquery-selector-extensions"/>
3035
<category slug="version/1.0"/>
31-
</entry>
36+
</entry>

0 commit comments

Comments
 (0)