Selecting and removing multiple classes in jQuery

If you have multiple ASP.NET Panels or <div> tags in your page with different classes, then here's how to select some classes and leave others using jQuery :

<html xmlns="">

<head runat="server">


<script src="Scripts/jquery-1.3.min.js" 



<script type="text/javascript">

$(document).ready(function() {

$('.oneClass, .oneMoreClass').


    function() {

        $(this).css({ background: "#C1DAD7" }); 


    function() {

        $(this).css({ background: "#ffffff" }); 







<style type="text/css">

















<form id="form1" runat="server">


<asp:Panel ID="Panel1" runat="server" class="oneClass"> 

    Panel 1


<asp:Panel ID="Panel2" runat="server" class="oneMoreClass">

    Panel 2


<asp:Panel ID="Panel3" runat="server" class="oneClass">

    Panel 3


<asp:Panel ID="Panel4" runat="server" class="notReqClass">

    Panel 4


<asp:Panel ID="Panel5" runat="server" class="oneClass">

    Panel 5






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: