Skip to content

Commit a3565d9

Browse files
agcolomscottgonzalez
agcolom
authored and
scottgonzalez
committed
Code indentation and formatting (e entries)
1 parent 8bda0c7 commit a3565d9

29 files changed

+521
-357
lines changed

‎entries/each.xml

+94-68
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,18 @@
1111
<longdesc>
1212
<p>The <code>.each()</code> method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword <code>this</code> refers to the element.</p>
1313
<p>Suppose you have a simple unordered list on the page:</p>
14-
<pre><code>&lt;ul&gt;
15-
&lt;li&gt;foo&lt;/li&gt;
16-
&lt;li&gt;bar&lt;/li&gt;
14+
<pre><code>
15+
&lt;ul&gt;
16+
&lt;li&gt;foo&lt;/li&gt;
17+
&lt;li&gt;bar&lt;/li&gt;
1718
&lt;/ul&gt;
1819
</code></pre>
1920
<p>You can select the list items and iterate across them:</p>
20-
<pre><code>$( "li" ).each(function( index ) {
21-
console.log( index + ": " + $(this).text() );
21+
<pre><code>
22+
$( "li" ).each(function( index ) {
23+
console.log( index + ": " + $( this ).text() );
2224
});
23-
</code></pre>
25+
</code></pre>
2426
<p>A message is thus logged for each item in the list:</p>
2527
<p>
2628
<samp>0: foo</samp>
@@ -29,9 +31,10 @@
2931
</p>
3032
<p>You can stop the loop from within the callback function by returning <code>false</code>.</p>
3133
<p>Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as <i>implicit iteration</i>. When this occurs, it is often unnecessary to <i>explicitly</i> iterate with the <code>.each()</code> method:</p>
32-
<pre><code>// The .each() method is unnecessary here:
34+
<pre><code>
35+
// The .each() method is unnecessary here:
3336
$( "li" ).each(function() {
34-
$(this).addClass( "foo" );
37+
$( this ).addClass( "foo" );
3538
});
3639

3740
// Instead, you should rely on implicit iteration:
@@ -41,79 +44,102 @@ $( "li" ).addClass( "bar" );
4144
<example>
4245
<desc>Iterate over three divs and sets their color property.</desc>
4346
<code><![CDATA[
44-
$(document.body).click(function () {
45-
$( "div" ).each(function (i) {
46-
if ( this.style.color != "blue" ) {
47-
this.style.color = "blue";
48-
} else {
49-
this.style.color = "";
50-
}
51-
});
52-
});
47+
$( document.body ).click(function () {
48+
$( "div" ).each(function ( i ) {
49+
if ( this.style.color != "blue" ) {
50+
this.style.color = "blue";
51+
} else {
52+
this.style.color = "";
53+
}
54+
});
55+
});
5356
]]></code>
5457
<css><![CDATA[
55-
div { color:red; text-align:center; cursor:pointer;
56-
font-weight:bolder; width:300px; }
57-
]]></css>
58-
<html><![CDATA[<div>Click here</div>
59-
<div>to iterate through</div>
60-
<div>these divs.</div>]]></html>
58+
div {
59+
color: red;
60+
text-align: center;
61+
cursor: pointer;
62+
font-weight: bolder;
63+
width: 300px;
64+
}
65+
]]></css>
66+
<html><![CDATA[
67+
<div>Click here</div>
68+
<div>to iterate through</div>
69+
<div>these divs.</div>
70+
]]></html>
6171
</example>
6272
<example>
63-
<desc>To access a jQuery object instead of the regular DOM element, use <code>$(this)</code>. For example:</desc>
73+
<desc>To access a jQuery object instead of the regular DOM element, use <code>$( this )</code>. For example:</desc>
6474
<code><![CDATA[
65-
$( "span" ).click(function () {
66-
$( "li" ).each(function(){
67-
$( this ).toggleClass( "example" );
68-
});
69-
});
70-
75+
$( "span" ).click(function() {
76+
$( "li" ).each(function() {
77+
$( this ).toggleClass( "example" );
78+
});
79+
});
7180
]]></code>
7281
<css><![CDATA[
73-
ul { font-size:18px; margin:0; }
74-
span { color:blue; text-decoration:underline; cursor:pointer; }
75-
.example { font-style:italic; }
76-
]]></css>
77-
<html><![CDATA[To do list: <span>(click here to change)</span>
78-
<ul>
79-
<li>Eat</li>
80-
<li>Sleep</li>
81-
82-
<li>Be merry</li>
83-
</ul>]]></html>
82+
ul {
83+
font-size: 18px;
84+
margin: 0;
85+
}
86+
span {
87+
color: blue;
88+
text-decoration: underline;
89+
cursor: pointer;
90+
}
91+
.example {
92+
font-style: italic;
93+
}
94+
]]></css>
95+
<html><![CDATA[
96+
To do list: <span>(click here to change)</span>
97+
<ul>
98+
<li>Eat</li>
99+
<li>Sleep</li>
100+
<li>Be merry</li>
101+
</ul>
102+
]]></html>
84103
</example>
85104
<example>
86105
<desc>Use "return" to break out of each() loops early.</desc>
87106
<code><![CDATA[
88-
$( "button" ).click(function () {
89-
$( "div" ).each(function ( index, domEle) {
90-
// domEle == this
91-
$( domEle ).css( "backgroundColor", "yellow" );
92-
if ( $(this).is( "#stop" ) ) {
93-
$( "span" ).text( "Stopped at div index #" + index );
94-
return false;
95-
}
96-
});
97-
});
98-
107+
$( "button" ).click(function() {
108+
$( "div" ).each(function( index, domEle ) {
109+
// domEle == this
110+
$( domEle ).css( "backgroundColor", "yellow" );
111+
if ( $( this ).is( "#stop" ) ) {
112+
$( "span" ).text( "Stopped at div index #" + index );
113+
return false;
114+
}
115+
});
116+
});
99117
]]></code>
100118
<css><![CDATA[
101-
div { width:40px; height:40px; margin:5px; float:left;
102-
border:2px blue solid; text-align:center; }
103-
span { color:red; }
104-
]]></css>
105-
<html><![CDATA[<button>Change colors</button>
106-
<span></span>
107-
<div></div>
108-
<div></div>
109-
110-
<div></div>
111-
<div></div>
112-
<div id="stop">Stop here</div>
113-
<div></div>
114-
115-
<div></div>
116-
<div></div>]]></html>
119+
div {
120+
width: 40px;
121+
height: 40px;
122+
margin: 5px;
123+
float: left;
124+
border: 2px blue solid;
125+
text-align: center;
126+
}
127+
span {
128+
color: red;
129+
}
130+
]]></css>
131+
<html><![CDATA[
132+
<button>Change colors</button>
133+
<span></span>
134+
<div></div>
135+
<div></div>
136+
<div></div>
137+
<div></div>
138+
<div id="stop">Stop here</div>
139+
<div></div>
140+
<div></div>
141+
<div></div>
142+
]]></html>
117143
</example>
118144
<category slug="miscellaneous/collection-manipulation"/>
119145
<category slug="traversing"/>

‎entries/element-selector.xml

+13-10
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,25 @@
1414
</longdesc>
1515
<example>
1616
<desc>Finds every DIV element.</desc>
17-
<code><![CDATA[$("div").css("border","9px solid red");]]></code>
18-
<html><![CDATA[<div>DIV1</div>
19-
20-
<div>DIV2</div>
21-
<span>SPAN</span>]]></html>
17+
<code><![CDATA[
18+
$( "div" ).css( "border", "9px solid red" );
19+
]]></code>
20+
<html><![CDATA[
21+
<div>DIV1</div>
22+
<div>DIV2</div>
23+
<span>SPAN</span>
24+
]]></html>
2225
<css><![CDATA[
23-
div,span {
26+
div, span {
2427
width: 60px;
2528
height: 60px;
26-
float:left;
29+
float: left;
2730
padding: 10px;
2831
margin: 10px;
29-
background-color: #EEEEEE;
32+
background-color: #eee;
3033
}
31-
]]></css>
34+
]]></css>
3235
</example>
3336
<category slug="selectors/basic-css-selectors"/>
3437
<category slug="version/1.0"/>
35-
</entry>
38+
</entry>

‎entries/empty-selector.xml

+17-11
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,24 @@
1313
</longdesc>
1414
<example>
1515
<desc>Finds all elements that are empty - they don't have child elements or text.</desc>
16-
<code><![CDATA[$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');]]></code>
16+
<code><![CDATA[
17+
$( "td:empty" )
18+
.text( "Was empty!" )
19+
.css( "background", "rgb(255,220,200)" );
20+
]]></code>
1721
<css><![CDATA[
18-
19-
td { text-align:center; }
20-
]]></css>
21-
<html><![CDATA[<table border="1">
22-
<tr><td>TD #0</td><td></td></tr>
23-
<tr><td>TD #2</td><td></td></tr>
24-
25-
<tr><td></td><td>TD#5</td></tr>
26-
</table>]]></html>
22+
td {
23+
text-align: center;
24+
}
25+
]]></css>
26+
<html><![CDATA[
27+
<table border="1">
28+
<tr><td>TD #0</td><td></td></tr>
29+
<tr><td>TD #2</td><td></td></tr>
30+
<tr><td></td><td>TD#5</td></tr>
31+
</table>
32+
]]></html>
2733
</example>
2834
<category slug="selectors/content-filter-selector"/>
2935
<category slug="version/1.0"/>
30-
</entry>
36+
</entry>

‎entries/empty.xml

+22-12
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,47 @@
77
<desc>Remove all child nodes of the set of matched elements from the DOM.</desc>
88
<longdesc>
99
<p>This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:</p>
10-
<pre><code>&lt;div class="container"&gt;
10+
<pre><code>
11+
&lt;div class="container"&gt;
1112
&lt;div class="hello"&gt;Hello&lt;/div&gt;
1213
&lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
13-
&lt;/div&gt;</code></pre>
14+
&lt;/div&gt;
15+
</code></pre>
1416
<p>We can target any element for removal:</p>
15-
<pre><code>$('.hello').empty();</code></pre>
17+
<pre><code>
18+
$( ".hello" ).empty();
19+
</code></pre>
1620
<p>This will result in a DOM structure with the <code>Hello</code> text deleted:</p>
17-
<pre><code>&lt;div class="container"&gt;
21+
<pre><code>
22+
&lt;div class="container"&gt;
1823
&lt;div class="hello"&gt;&lt;/div&gt;
1924
&lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
20-
&lt;/div&gt;</code></pre>
25+
&lt;/div&gt;
26+
</code></pre>
2127
<p>If we had any number of nested elements inside <code>&lt;div class="hello"&gt;</code>, they would be removed, too. </p>
2228
<p>To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.</p>
2329
<p>If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use <a href="/detach/"><code>.detach()</code></a> instead.</p>
2430
</longdesc>
2531
<example>
2632
<desc>Removes all child nodes (including text nodes) from all paragraphs</desc>
2733
<code><![CDATA[
28-
$("button").click(function () {
29-
$("p").empty();
30-
});
34+
$( "button" ).click(function () {
35+
$( "p" ).empty();
36+
});
3137
]]></code>
3238
<css><![CDATA[
33-
p { background:yellow; }
39+
p {
40+
background: yellow;
41+
}
3442
]]></css>
35-
<html><![CDATA[<p>
43+
<html><![CDATA[
44+
<p>
3645
Hello, <span>Person</span> <a href="javascript:;">and person</a>
3746
</p>
3847
39-
<button>Call empty() on above paragraph</button>]]></html>
48+
<button>Call empty() on above paragraph</button>
49+
]]></html>
4050
</example>
4151
<category slug="manipulation/dom-removal"/>
4252
<category slug="version/1.0"/>
43-
</entry>
53+
</entry>

‎entries/enabled-selector.xml

+10-7
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</signature>
88
<desc>Selects all elements that are enabled.</desc>
99
<longdesc>
10-
<p>As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':enabled')</code> is equivalent to <code>$('*:enabled')</code>, so <code>$('input:enabled')</code> or similar should be used instead. </p>
10+
<p>As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ( "*" ) is implied. In other words, the bare <code>$( ":enabled" )</code> is equivalent to <code>$( "*:enabled" )</code>, so <code>$( "input:enabled" )</code> or similar should be used instead. </p>
1111

1212
<p>Although their resulting selections are usually the same, <code>:enabled</code> selector is subtly different from <code>:not([disabled])</code>; <code>:enabled</code> selects elements that have their boolean disabled property strictly equal to false, while <code>:not([disabled])</code> selects elements that do not have a disabled <em>attribute</em> set (regardless of its value).</p>
1313

@@ -16,12 +16,15 @@
1616
</longdesc>
1717
<example>
1818
<desc>Find all input elements that are enabled.</desc>
19-
<code><![CDATA[$("input:enabled").val("this is it");]]></code>
20-
<html><![CDATA[<form>
21-
22-
<input name="email" disabled="disabled" />
23-
<input name="id" />
24-
</form>]]></html>
19+
<code><![CDATA[
20+
$( "input:enabled" ).val( "this is it" );
21+
]]></code>
22+
<html><![CDATA[
23+
<form>
24+
<input name="email" disabled="disabled">
25+
<input name="id">
26+
</form>
27+
]]></html>
2528
</example>
2629
<category slug="selectors/form-selectors"/>
2730
<category slug="version/1.0"/>

0 commit comments

Comments
 (0)