SelectElementsInjQueryWithIdOrMultipleClass

Select Elements In jQuery With Id Or Multiple Classes

Spread the love

In this article, I will be explaining how to select elements in jQuery with id or multiple classes. To demonstrate this with an example, what I am going to do is I will be creating a div element with id as div1 and I will apply two classes on this div, namely color and bold. The color class will make the color of the text in this div as red color and the bold class will make the font of the text in this div as bold.

Next I will add four buttons below this div, namely “Hide With Class”, “Show With Class”, “Hide With Id” and “Show With Id”. As the name suggests:
1. “Hide With Class” button will find the div element by class and hide it.
2. “Show With Class” button will find the div element by class and show it.
3. “Hide With Id” button will find the div element by id and hide it.
4. “Show With Id” button will find the div element by id and show it.

To make the example a little more interesting, I am applying multiple classes on the div as mentioned earlier. Please note that if you have to find an element by a single class, you use $(.classname) and if you have to find an element with multiple classes or by id and class, you just append the class name with a dot and id name with a #. So to find an element with class1 and class2 we can use $(.class1.class2) and to find an element with id as div1 and classes as class1 and class2, we can use $(#div1.class1.class2).

Therefore:
1. To hide the div by id and class, I have used $(“#div1.color.bold”).hide();
2. To show the div by id and class, I have used $(“#div1.color.bold”).show();
3. To hide the div by only id, I have used $(“#div1 “).hide();
4. To show the div by only id, I have used $(“#div1 “).show();

If I want to find the element only by class, I can use $(.color.bold) to find the element. So I hope you understood the idea. Below is the complete code:

Default.aspx

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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .color {
            color:#FF0000;
        }
        .bold{
            font-weight:bold;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#btnhidewithclass").click(function ()
            {
                $("#div1.color.bold").hide();
            });
            $("#btnshowwithclass").click(function () {
                $("#div1.color.bold").show();
            });
 
            $("#btnhide").click(function () {
                $("#div1").hide();
            });
            $("#btnshow").click(function () {
                $("#div1").show();
            });
        });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1" class="color bold">
    Hello World
    </div>
        <input id="btnhidewithclass" type="button" value="Hide With Class" />
        <input id="btnshowwithclass" type="button" value="Show With Class" />
        <input id="btnhide" type="button" value="Hide With Id" />
        <input id="btnshow" type="button" value="Show With Id" />
    </form>
</body>
</html>

SelectElementsInjQueryWithIdOrMultipleClass


Leave a Reply

Your email address will not be published. Required fields are marked *