<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>use-add-remove css Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/use-add-remove-css/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/use-add-remove-css/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 13 Apr 2022 16:34:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>How to Use add-remove CSS classes in jQuery?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-use-add-remove-css-classes-in-jquery/</link>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Sat, 02 Oct 2021 12:40:11 +0000</pubDate>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[classes]]></category>
		<category><![CDATA[index.html]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[main.js]]></category>
		<category><![CDATA[style.css]]></category>
		<category><![CDATA[use-add-remove css]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=9379</guid>

					<description><![CDATA[<p>So in this blog, we’re going to learn that Use add-remove CSS classes in jQuery? So let’s go ahead and [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-add-remove-css-classes-in-jquery/">How to Use add-remove CSS classes in jQuery?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">So in this blog, we’re going to learn that Use <strong>add-remove</strong> CSS classes in <strong>jQuery</strong>?</p>



<p class="wp-block-paragraph">So let’s go ahead and do that for first in <strong>index.html</strong>, with help of <strong>style.css</strong> &amp; <strong>main.js</strong> and define-</p>



<script src="https://gist.github.com/ajcotocus/6280ef413dcc0f461281494b416e7df8.js"></script>



<script src="https://gist.github.com/ajcotocus/b3a598df34afb4cb25553c5ae80564dc.js"></script>



<p class="wp-block-paragraph">Additional CSS classes can be added to an element via addClass() For instance, add the class .fancy-link to all anchor tags. Note that you *do not* add a dot in front of the class name here.</p>



<p class="wp-block-paragraph">$<strong>(&#8220;a&#8221;).addClass(&#8220;fancy-link&#8221;);</strong></p>



<p class="wp-block-paragraph">You can also add multiple classes at once.</p>



<p class="wp-block-paragraph"><strong>  $(&#8220;p:first&#8221;).addClass(&#8220;large emphasize&#8221;);</strong></p>



<p class="wp-block-paragraph">To attach a class based on the index of the element in your selected set of elements, you can use a callback function.</p>



<p class="wp-block-paragraph"><strong>$(&#8220;li li&#8221;).addClass(function(index) {</strong><br>// This adds classes .item-0, .item-1, … to the list&#8217;s sub-items.<br><strong>$(this).addClass(&#8220;item-&#8221; + index);<br>});</strong></p>



<p class="wp-block-paragraph">You can even use two parameters for the callback function, the index and the current class of the element.</p>



<p class="wp-block-paragraph">$(&#8220;div&#8221;).addClass(function(index, currentClasses) {<br>console.log(currentClasses); // String containing all classes</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
// Add .red-box if the current classes contain &quot;dummy&quot;
if (currentClasses.indexOf(&quot;dummy&quot;) !== -1) {
  return &quot;red-box&quot;;
}
</pre></div>


<p class="wp-block-paragraph">});</p>



<script src="https://gist.github.com/ajcotocus/af43dbbf53c292fa60e9659095445c8e.js"></script>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="610" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3-1024x610.png" alt="" class="wp-image-9380" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3-1024x610.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3-768x457.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3-1536x914.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-3.png 1579w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>CSS classes in jQuery without<strong> js</strong></figcaption></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="572" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4-1024x572.png" alt="" class="wp-image-9381" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4-1024x572.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4-300x168.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4-768x429.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4-1536x858.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-4.png 1629w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption> CSS classes in jQuery with <strong>js</strong></figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-add-remove-css-classes-in-jquery/">How to Use add-remove CSS classes in jQuery?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
