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:
Hey there! If you've ever found yourself scratching your head over a forgotten MySQL root password on Ubuntu, fear n...
Jan-26-2024
Hey there! So, you're working with PHP and trying to fetch content from an HTTPS URL using the file_get_contents() f...
Mar-01-2024
In this article, we will see laravel 10 create an ajax pagination example. Here, we will learn about how to create...
Apr-17-2023
In this article, we will see how to merge two pdf files in laravel 9. Here, we will learn laravel 8/9 to merge two...
Dec-20-2022