8000 Code indentation and formatting (p entries) · esx/api.jquery.com@0526923 · GitHub
Skip to content

Commit 0526923

Browse files
agcolomscottgonzalez
agcolom
authored and
scottgonzalez
committed
Code indentation and formatting (p entries)
1 parent 0d7949d commit 0526923

14 files changed

Lines changed: 428 additions & 283 deletions

‎entries/parent-selector.xml‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,26 @@
1010
<p>This is the inverse of <code>:empty</code>. </p>
1111
<p>One important thing to note regarding the use of <code>:parent</code> (and <code>:empty</code>) is that child nodes include text nodes.</p>
1212
<p>The W3C recommends that the <code>&lt;p&gt;</code> element have at least one child node, even if that child is merely text (see <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P">http://www.w3.org/TR/html401/struct/text.html#edef-P</a>). Some other elements, on the other hand, are empty (i.e. have no children) by definition:<code> &lt;input&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>, and <code>&lt;hr&gt;</code>, for example.</p>
13-
<p>To obtain the parents or ancestors of an existing jQuery set, see the <code><a href="http://api.jquery.com/parent/">.parent()</a></code> and <code><a href="http://api.jquery.com/parents/">.parents()</a></code> methods.</p>
13+
<p>To obtain the parents or ancestors of an existing jQuery set, see the <code><a href="/parent/">.parent()</a></code> and <code><a href="/parents/">.parents()</a></code> methods.</p>
1414
</longdesc>
1515
<note id="jquery-selector-extension" type="additional" data-selector=":parent"/>
1616
<example>
1717
<desc>Finds all tds with children, including text.</desc>
18-
<code><![CDATA[$("td:parent").fadeTo(1500, 0.3);]]></code>
18+
<code><![CDATA[
19+
$( "td:parent" ).fadeTo( 1500, 0.3 );
20+
]]></code>
1921
<css><![CDATA[
20-
td { width:40px; background:green; }
21-
]]></css>
22-
<html><![CDATA[<table border="1">
22+
td {
23+
width: 40px;
24+
background: green;
25+
}
26+
]]></css>
27+
<html><![CDATA[
28+
<table border="1">
2329
<tr><td>Value 1</td><td></td></tr>
2430
<tr><td>Value 2</td><td></td></tr>
25-
</table>]]></html>
31+
</table>
32+
]]></html>
2633
</example>
2734
<category slug="selectors/content-filter-selector"/>
2835
<category slug="selectors/jquery-selector-extensions"/>

‎entries/parent.xml‎

Lines changed: 37 additions & 29 deletions
7E6B
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<desc>Get the parent of each element in the current set of matched elements, optionally filtered by a selector.</desc>
1111
<longdesc>
1212
<p>Given a jQuery object that represents a set of DOM elements, the <code>.parent()</code> method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
13-
<p>The <code><a href="/parents/">.parents()</a></code> and <code>.parent()</code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$("html").parent()</code> method returns a set containing <code>document</code> whereas <code>$("html").parents()</code> returns an empty set.</p>
13+
<p>The <code><a href="/parents/">.parents()</a></code> and <code>.parent()</code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$( "html" ).parent()</code> method returns a set containing <code>document</code> whereas <code>$( "html" ).parents()</code> returns an empty set.</p>
1414
<p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
1515
<p>Consider a page with a basic nested list on it:</p>
1616
<pre><code>
@@ -33,47 +33,55 @@
3333
&lt;/ul&gt;
3434
</code></pre>
3535
<p>If we begin at item A, we can find its parents:</p>
36-
<pre><code>$('li.item-a').parent().css('background-color', 'red');</code></pre>
36+
<pre><code>
37+
$( "li.item-a" ).parent().css( "background-color", "red");
38+
</code></pre>
3739
<p>The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.</p>
3840
</longdesc>
3941
<example>
4042
<desc>Shows the parent of each element as (parent &gt; child). Check the View Source to see the raw html.</desc>
4143
<code><![CDATA[
42-
$("*", document.body).each(function () {
43-
var parentTag = $(this).parent().get(0).tagName;
44-
$(this).prepend(document.createTextNode(parentTag + " > "));
44+
$( "*", document.body ).each(function () {
45+
var parentTag = $( this ).parent().get( 0 ).tagName;
46+
$( this ).prepend( document.createTextNode( parentTag + " > " ) );
4547
});
4648
]]></code>
4749
<css><![CDATA[
48-
div,p { margin:10px; }
49-
]]></css>
50-
<html><![CDATA[<div>div,
51-
<span>span, </span>
52-
<b>b </b>
53-
54-
</div>
55-
<p>p,
56-
<span>span,
57-
<em>em </em>
58-
</span>
59-
</p>
50+
div, p {
51+
margin: 10px;
52+
}
53+
]]></css>
54+
<html><![CDATA[
55+
<div>div,
56+
<span>span, </span>
57+
<b>b </b>
58+
</div>
6059
61-
<div>div,
62-
<strong>strong,
63-
<span>span, </span>
64-
<em>em,
65-
<b>b, </b>
66-
</em>
60+
<p>p,
61+
<span>span,
62+
<em>em </em>
63+
</span>
64+
</p>
6765
68-
</strong>
69-
<b>b </b>
70-
</div>]]></html>
66+
<div>div,
67+
<strong>strong,
68+
<span>span, </span>
69+
<em>em,
70+
<b>b, </b>
71+
</em>
72+
</strong>
73+
<b>b </b>
74+
</div>
75+
]]></html>
7176
</example>
7277
<example>
7378
<desc>Find the parent element of each paragraph with a class "selected".</desc>
74-
<code><![CDATA[$("p").parent(".selected").css("background", "yellow");]]></code>
75-
<html><![CDATA[<div><p>Hello</p></div>
76-
<div class="selected"><p>Hello Again</p></div>
79+
<code><![CDATA[
80+
$( "p" ).parent( ".selected" ).css( "background", "yellow" );
81+
]]></code>
82+
<html><![CDATA[
83+
<div><p>Hello</p></div>
84+
<div class="selected"><p>Hello Again</p></div>
7785
]]></html>
7886
</example>
7987
<category slug="traversing/tree-traversal"/>

‎entries/parents.xml‎

Lines changed: 64 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<desc>Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.</desc>
1111
<longdesc>
1212
<p>Given a jQuery object that represents a set of DOM elements, the <code>.parents()</code> method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones. When multiple DOM elements are in the original set, the resulting set will be in <em>reverse</em> order of the original elements as well, with duplicates removed.</p>
13-
<p>The <code>.parents()</code> and <code><a href="http://api.jquery.com/parent/">.parent()</a></code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$("html").parent()</code> method returns a set containing <code>document</code> whereas <code>$("html").parents()</code> returns an empty set.</p>
13+
<p>The <code>.parents()</code> and <code><a href="/parent/">.parent()</a></code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$( "html" ).parent()</code> method returns a set containing <code>document</code> whereas <code>$( "html" ).parents()</code> returns an empty set.</p>
1414
<p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
1515
<p>Consider a page with a basic nested list on it:</p>
1616
<pre><code>
@@ -31,73 +31,96 @@
3131
&lt;/li&gt;
3232
&lt;li class="item-iii"&gt;III&lt;/li&gt;
3333
&lt;/ul&gt;
34-
</code></pre>
34+
</code></pre>
3535
<p>If we begin at item A, we can find its ancestors:</p>
36-
<pre><code>$('li.item-a').parents().css('background-color', 'red');</code></pre>
36+
<pre><code>
37+
$( "li.item-a" ).parents().css( "background-color", "red" );
38+
</code></pre>
3739
<p>The result of this call is a red background for the level-2 list, item II, and the level-1 list (and on up the DOM tree all the way to the <code>&lt;html&gt;</code> element). Since we do not supply a selector expression, all of the ancestors are part of the returned jQuery object. If we had supplied one, only the matching items among these would be included.</p>
3840
</longdesc>
3941
<example>
4042
<desc>Find all parent elements of each b.</desc>
4143
<code><![CDATA[
4244
var parentEls = $("b").parents()
43-
.map(function () {
44-
return this.tagName;
45-
})
46-
.get().join(", ");
47-
$("b").append("<strong>" + parentEls + "</strong>");
45+
.map(function () {
46+
return this.tagName;
47+
})
48+
.get()
49+
.join(", ");
50+
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
4851
]]></code>
4952
<css><![CDATA[
5053
b, span, p, html body {
5154
padding: .5em;
5255
border: 1px solid;
5356
}
54-
b { color:blue; }
55-
strong { color:red; }
56-
]]></css>
57-
<html><![CDATA[<div>
58-
<p>
59-
<span>
60-
<b>My parents are: </b>
61-
</span>
62-
</p>
63-
</div>]]></html>
57+
b {
58+
color: blue;
59+
}
60+
strong {
61+
color: red;
62+
}
63+
]]></css>
64+
<html><![CDATA[
65+
<div>
66+
<p>
67+
<span>
68+
<b>My parents are: </b>
69+
</span>
70+
</p>
71+
</div>
72+
]]></html>
6473
</example>
6574
<example>
6675
<desc>Click to find all unique div parent elements of each span.</desc>
6776
<code><![CDATA[
6877
function showParents() {
69-
$("div").css("border-color", "white");
70-
var len = $("span.selected")
71-
.parents("div")
72-
.css("border", "2px red solid")
73-
.length;
74-
$("b").text("Unique div parents: " + len);
78+
$( "div" ).css( "border-color", "white" );
79+
var len = $( "span.selected" )
80+
.parents( "div" )
81+
.css( "border", "2px red solid" )
82+
.length;
83+
$( "b" ).text( "Unique div parents: " + len );
7584
}
76-
$("span").click(function () {
77-
$(this).toggleClass("selected");
85+
$( "span" ).click(function () {
86+
$( this ).toggleClass( "selected" );
7887
showParents();
79-
});]]></code>
88+
});
89+
]]></code>
8090
<css><![CDATA[
81-
82-
p, div, span {margin:2px; padding:1px; }
83-
div { border:2px white solid; }
84-
span { cursor:pointer; font-size:12px; }
85-
.selected { color:blue; }
86-
b { color:red; display:block; font-size:14px; }
87-
]]></css>
88-
<html><![CDATA[<p>
89-
<div>
90-
<div><span>Hello</span></div>
91+
p, div, span {
92+
margin: 2px;
93+
padding: 1px;
94+
}
95+
div {
96+
border: 2px white solid;
97+
}
98+
span {
99+
cursor: pointer;
100+
font-size: 12px;
101+
}
102+
.selected {
103+
color: blue;
104+
}
105+
b {
106+
color: red;
107+
display: block;
108+
font-size: 14px;
109+
}
110+
]]></css>
111+
<html><![CDATA[
112+
<p>
113+
<div>
114+
<div><span>Hello</span></div>
91115
<span>Hello Again</span>
92-
93116
</div>
94117
<div>
95118
<span>And Hello Again</span>
96119
</div>
97120
</p>
98-
99-
<b>Click Hellos to toggle their parents.</b>]]></html>
121+
<b>Click Hellos to toggle their parents.</b>
122+
]]></html>
100123
</example>
101124
<category slug="traversing/tree-traversal"/>
102125
<category slug="version/1.0"/>
103-
</entry>
126+
</entry>

‎entries/parentsUntil.xml‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@
3030
<height>220px</height>
3131
<desc>Find the ancestors of &lt;li class="item-a"&gt; up to &lt;ul class="level-1"&gt; and give them a red background color. Also, find ancestors of &lt;li class="item-2"&gt; that have a class of "yes" up to &lt;ul class="level-1"&gt; and give them a green border.</desc>
3232
<code><![CDATA[
33-
$("li.item-a").parentsUntil(".level-1")
34-
.css("background-color", "red");
35-
36-
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
37-
.css("border", "3px solid green");
33+
$( "li.item-a" )
34+
.parentsUntil( ".level-1" )
35+
.css( "background-color", "red" );
3836
37+
$( "li.item-2" )
38+
.parentsUntil( $( "ul.level-1" ), ".yes" )
39+
.css( "border", "3px solid green" );
3940
]]></code>
4041
<html><![CDATA[
4142
<ul class="level-1 yes">
@@ -54,9 +55,10 @@ $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
5455
</ul>
5556
</li>
5657
<li class="item-iii">III</li>
57-
</ul>]]></html>
58+
</ul>
59+
]]></html>
5860
</example>
5961
<category slug="traversing/tree-traversal"/>
6062
<category slug="version/1.4"/>
6163
<category slug="version/1.6"/>
62-
</entry>
64+
</entry>

‎entries/password-selector.xml‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,51 @@
77
</signature>
88
<desc>Selects all elements of type password.</desc>
99
<longdesc>
10-
<p><code>$(':password')</code> is equivalent to <code>$('[type=password]')</code>. 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>$(':password')</code> is equivalent to <code>$('*:password')</code>, so <code>$('input:password')</code> should be used instead. </p>
10+
<p><code>$( ":password" )</code> is equivalent to <code>$( "[type=password]" )</code>. 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>$( ":password" )</code> is equivalent to <code>$( "*:password" )</code>, so <code>$( "input:password" )</code> should be used instead. </p>
1111
</longdesc>
1212
<note id="jquery-selector-extension-alt" type="additional" data-selector=":password" data-alt="[type=&quot;password&quot;]"/>
1313
<example>
1414
<desc>Finds all password inputs.</desc>
1515
<code><![CDATA[
16-
var input = $("input:password").css({background:"yellow", border:"3px red solid"});
17-
$("div").text("For this type jQuery found " + input.length + ".")
18-
.css("color", "red");
19-
$("form").submit(function () { return false; }); // so it won't submit
16+
var input = $( "input:password" ).css({
17+
background: "yellow",
18+
border: "3px red solid"
19+
});
20+
21+
$( "div" )
22+
.text( "For this type jQuery found " + input.length + "." )
23+
.css( "color", "red" );
24+
$( "form" ).submit(function() {
25+
return false;
26+
}); // So it won't submit
2027
]]></code>
2128
<css><![CDATA[
22-
textarea { height:45px; }
23-
]]></css>
24-
<html><![CDATA[<form>
25-
<input type="button" value="Input Button"/>
26-
<input type="checkbox" />
27-
28-
<input type="file" />
29-
<input type="hidden" />
30-
<input type="image" />
31-
32-
<input type="password" />
33-
<input type="radio" />
34-
<input type="reset" />
35-
36-
<input type="submit" />
37-
<input type="text" />
38-
<select><option>Option<option/></select>
39-
40-
<textarea></textarea>
41-
<button>Button</button>
42-
</form>
43-
<div>
44-
</div>]]></html>
29+
textarea {
30+
height: 45px;
31+
}
32+
]]></css>
33+
<html><![CDATA[
34+
<form>
35+
<input type="button" value="Input Button">
36+
<input type="checkbox">
37+
<input type="file">
38+
<input type="hidden">
39+
<input type="image">
40+
<input type="password">
41+
<input type="radio">
42+
<input type="reset">
43+
<input type="submit">
44+
<input type="text">
45+
<select>
46+
<option>Option</option>
47+
</select>
48+
<textarea></textarea>
49+
<button>Button</button>
50+
</form>
51+
<div></div>
52+
]]></html>
4553
</example>
4654
<category slug="selectors/form-selectors"/>
4755
<category slug="selectors/jquery-selector-extensions"/>
4856
<category slug="version/1.0"/>
49-
</entry>
57+
</entry>

0 commit comments

Comments
 (0)