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="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function() {

$('.oneClass, .oneMoreClass').

removeClass('notReqClass').hover(

    function() {

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

},

    function() {

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

);

});

</script>

<style type="text/css">

.oneClass

    font-style:italic;

.oneMoreClass

    font-weight:bold;

.notReqClass

    background:White;

</style>

</head>

<body>

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

<div>

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

    Panel 1

</asp:Panel>

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

    Panel 2

</asp:Panel>

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

    Panel 3

</asp:Panel>

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

    Panel 4

</asp:Panel>

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

    Panel 5

</asp:Panel>

</div>

</form>

</body>

</html>

About The Author

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.

Selecting and removing multiple classes in jQuery

About The Author

No comments:

Labels