How To Get The ID Of An Element Using jQuery

Websolutionstuff | Jul-04-2022 | Categories : jQuery

In this article, we will see how to get the id of an element using jquery. Using the jquery attr() method to get or set the id attribute value of an element. The attr() method sets or returns attribute values of the selected elements.

So, let's see get the id of clicked element jquery, jquery get the id of element, set the id of element jquery, attr method in jquery, how to get the id of the element in javascript, get id of element on click jquery, set attr value jquery.

The following example will display the ID of the DIV element in an alert box on a button click.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>How To Get The ID Of An Element Using jQuery - Websolutionstuff</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <style>
            div{
                padding: 20px;
                background: #abb1b8;
            }
        </style>
        <script>
        $(document).ready(function(){
            $("#btnID").click(function(){
                var elmId = $("#divID").attr("id");
                alert(elmId);
            });
        });
        </script>
    </head>
    <body>
        <div id="divID">#text</div><br>
        <button type="button" id="btnID">Show Div ID</button>
    </body>
</html>

 

 

You can also get the ID of multiple elements having the same class through the loop, like this.

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>How To Get The ID Of An Element Using jQuery - Websolutionstuff</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        div{
            padding: 20px;
            margin-bottom: 10px;
            background: #abb1b8;
        }
    </style>
    <script>
    $(document).ready(function(){
        $("#btnID").click(function(){
            var idArr = [];
            $(".box").each(function(){
                idArr.push($(this).attr("id"));
            });
            
            // Join array elements and display in alert
            alert(idArr.join(", "));
        });
    });
    </script>
    </head>
    <body>
        <div class="box" id="divIDOne">#boxOne</div>
        <div class="box" id="divIDTwo">#boxTwo</div>
        <div class="box" id="divIDThree">#boxThree</div>
        <button type="button" id="btnID">Show ID List</button>
    </body>
</html>

 


You might also like:

Recommended Post
Featured Post
How to Get Selected Checkbox Value in Array Using jQuery
How to Get Selected Checkbox V...

In this post we will see how to get selected checkbox value in array using jquery. Here i will give you some example to&...

Read More

May-24-2021

Laravel 11 Socialite Login with Gitlab Account
Laravel 11 Socialite Login wit...

Hello, Laravel web developers! In this article, I'll show you how to log in with GitLab in Laravel 11 using Socialit...

Read More

Aug-14-2024

How to Use ngStyle in Angular for Dynamic Styling?
How to Use ngStyle in Angular...

A user-friendly and dynamic interface is paramount to engaging users on your site. Angular is one of the most powerful a...

Read More

Oct-04-2023

Laravel 8 Image Upload Example
Laravel 8 Image Upload Example

In this article, we will see the laravel 8 image upload example. Image or file upload is the most common task...

Read More

Oct-06-2020