jQuery Get Element By Class

How can we access the HTML element using class name with jQuery ?

Elements with particular class can be easily accessed with jQuery . As per jQuery function syntax , starts with $ then in parenthesis we will pass the class name with dot ( . ) at the start.

Syntax of get Element By Class name using jQuery

$(".ClassName");

We are now going to building our jQuery Class access by Example below.

On Click Assign Dashed red Border to the HTML Elements with class="myclass"

First we will get access to the HTML elements with class="myclass" then using the jQuery CSS function css() function we will assign the dashed border.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="myclass"> Click Me </button> <div class="myclass" >Welcome to CodingPk jQuery Tutorial Get Element By Class </div> <script type="text/javascript"> $("button").click(function() { $(".myclass").css("border","dashed 1px red"); }); </script>

Output of above code get Element By Class

Note. We can also access HTML element by Class at particular index like below.

Select HTML elements with Class at particular index

$(".myclass").eq(1).css("border","solid red 1px"); Index will start from 0.

• First HTML element with class="myclass" index will be Zero i.e eq(0).
• Second HTML element with class="myclass" index will be One i.e eq(1).
jquery Jquery Select Element By Class Chapter Next »