jQuery attr() get the data-id attribute of an element

Description

jQuery attr() get the data-id attribute of an element

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get the data-id Attribute</title>
<style>
    ul li{
        display: inline-block;
        margin: 10px;
        list-style: none;
        opacity: 0.8;
    }//  w w w  .j  av  a 2 s  .  co m
    ul li:hover{
        opacity: 1;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $(".gallery li").on("click", function(){
        var dataId = $(this).attr("data-id");
        document.getElementById("demo").innerHTML = "The data-id of clicked item is: " + dataId;
    });
});
</script>
</head>
<body>
    <p id="demo"></p>
    <ul class="gallery">
        <li data-id="1">
            <a href="#">
                <img src="image1.png" alt="Club">
            </a>
        </li>
        <li data-id="2">
            <a href="#">
                <img src="image2.png" alt="Diamond">
            </a>
        </li>
        <li data-id="3">
            <a href="#">
                <img src="image3.png" alt="Spade">
            </a>
        </li>
        <li data-id="4">
            <a href="#">
                <img src="image4.png" alt="Heart">
            </a>
        </li>
    </ul>
    <p>Click on any image to get its data-id attribute.</p>
</body>
</html>



PreviousNext

Related