forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaddClass.xml
125 lines (123 loc) · 4.53 KB
/
addClass.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?xml version="1.0"?>
<entry type="method" name="addClass" return="jQuery">
<title>.addClass()</title>
<signature>
<added>1.0</added>
<argument name="className" type="String">
<desc>One or more space-separated classes to be added to the class attribute of each matched element.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<desc>A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, <code>this</code> refers to the current element in the set.</desc>
<argument name="index" type="Integer" />
<argument name="currentClassName" type="String" />
<return type="String"/>
</argument>
</signature>
<desc>Adds the specified class(es) to each element in the set of matched elements.</desc>
<longdesc>
<p>It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
<p>Before jQuery version 1.12/2.2, the <code>.addClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
<p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.addClass()</code> can be used on XML or SVG documents.</p>
<p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
<pre><code>
$( "p" ).addClass( "myClass yourClass" );
</code></pre>
<p>This method is often used with <code>.removeClass()</code> to switch elements' classes from one to another, like so:</p>
<pre><code>
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
</code></pre>
<p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
<p>As of jQuery 1.4, the <code>.addClass()</code> method's argument can receive a function.</p>
<pre><code>
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
</code></pre>
<p>Given an unordered list with two <code><li></code> elements, this example adds the class "item-0" to the first <code><li></code> and "item-1" to the second.</p>
</longdesc>
<example>
<desc>Add the class "selected" to the matched elements.</desc>
<code><![CDATA[
$( "p" ).last().addClass( "selected" );
]]></code>
<css><![CDATA[
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
]]></html>
</example>
<example>
<desc>Add the classes "selected" and "highlight" to the matched elements.</desc>
<code><![CDATA[
$( "p:last" ).addClass( "selected highlight" );
]]></code>
<css><![CDATA[
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
]]></html>
</example>
<example>
<desc>Pass in a function to <code>.addClass()</code> to add the "green" class to a div that already has a "red" class.</desc>
<code><![CDATA[
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
]]></code>
<css><![CDATA[
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
]]></css>
<html><![CDATA[
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
]]></html>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.4"/>
</entry>