Get data attribute value JavaScript – How to Get the data-id Attribute of an Element Using jQuery?

Get data attribute value JavaScript Use the jQuery attr() Method. also you can use this jquery attr() syntax for get data-id attribute value.

Free Live Chat for Any Issue

Get data attribute value JavaScript – How to get value of data attribute and use it in jQuery?

$(“yourSelector”).data()

jQuery Get Data Text, Id, Attribute Value Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get the data-id Attribute - www.pakainfo.com</title>
<style>
    ul li{ 
        display: inline-block;
        margin: 19px;
        list-style: none;
        opacity: 0.8;
    }
    ul li:hover{
        opacity: 1;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".portfolio li").on("click", function(){
        var dataId = $(this).attr("data-id");
        alert("The data-id of clicked website is: " + dataId);
    });
});
</script>
</head>
<body>
    <ul class="portfolio">
        <li data-id="1">
            <a href="#">
                <img src="images/pakainfo.jpg" alt="pakainfo">
            </a>            
        </li>
        <li data-id="2">
            <a href="#">
                <img src="images/w3school.jpg" alt="w3school">
            </a>
        </li>
        <li data-id="3">
            <a href="#">
                <img src="images/infinityknow.jpg" alt="infinityknow">
            </a>
        </li>
        <li data-id="4">
            <a href="#">
                <img src="images/blog.jpg" alt="blog">
            </a>
        </li>
    </ul>
</body>
</html>

Don’t Miss : jquery get data attribute

I hope you get an idea about Get data attribute value JavaScript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.