CODEWITHSUNDEEP
jqueryhtml
C.Roshan
C.Roshan

Reputation: 95

I need to get id from HTML using jQuery

This is my code:

$('.image1').click(function(){ 
    $('.loader').show();
    function preloadImages(images, callback) {
        var count = images.length;  
        var loaded = 0;
        $(images).each(function() {
            $('<img>').attr('src', this).load(function() {
                loaded++;
                if (loaded === count) {
                    callback();
                }
            });
        });
    }; 

    preloadImages(["../images/Wedding_p/large/1.jpg",                                      
           "../images/Wedding_p/large/2.jpg",
           "../images/Wedding_p/large/3.jpg", 
           "../images/Wedding_p/large/4.jpg",
           "../images/Wedding_p/large/5.jpg"],    function() {
               alert("DONE");
               // In here I need to get id of '.image1' image.
           }

this is html: 

<div>
    <img src = '1.jpg' data-id='1' class = 'image1'>
    <img src = '2.jpg' data-id='2' class = 'image1'> 
    <img src = '3.jpg' data-id='3' class = 'image1'>
</div>

When I click on the image I need the data-id of clicked image; how can I get it using my jQuery code.

Upvotes: 2

Views: 76

Answers (3)

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5039

Try this:

$(document).on('click', '.image1', function() {
   alert($(this).data("id"));
});

Upvotes: 2

Anuj Kumar
Anuj Kumar

Reputation: 134

You can use following code to get the value of data-id attribute

$(this).attr('data-id');

Upvotes: 0

Uttam Kumar Roy
Uttam Kumar Roy

Reputation: 2058

$(document).ready(function() {
  
  $("img").click(function() {
        alert($(this).attr('data-id')); 
 });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
     <img src = '1.jpg' data-id='1' class = 'image1'>
         <img src = '2.jpg' data-id='2' class = 'image1'> 
         <img src = '3.jpg' data-id='3' class = 'image1'>

</div>

Upvotes: 4

Related Questions