CODEWITHSUNDEEP
javascriptjqueryhtml
Kevin Kopf
Kevin Kopf

Reputation: 14195

How to get div id from each returning div?

I have this code:

        var limit = 15;

    $(document).ready(function() {
      var data = 'clients=&categories=&keywords=&limit='+limit;
      $.ajax({
        type: 'POST',
        url: 'index.php?ind=work&op=get_list',
        data: data,
                success: function (data) {
            $('.list').html(data);
               $('.thumb').click(function() {
                 alert($('.thumb').attr('id'));
               });
            }
        });
    });

This code returns stuff like this:

    <div class="thumb" id="1" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/1.png">
</div>
    <div class="thumb" id="2" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/2.png">
</div>
    <div class="thumb" id="3" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/3.png">
</div>

But every time I click any of the divs, an alert shows "1" (no matter if I click div with id=1, div with id=2 or div with id=3). Could someone please tell me how to make an alert with the right div id every time I click that div? Thanx in advance.

Upvotes: 0

Views: 49

Answers (2)

Alpha Codemonkey
Alpha Codemonkey

Reputation: 3261

$('.thumb').attr('id') returns the id of the first .thumb element, which is what you are seeing.

Change your event to use the element that was clicked:

$('.thumb').click(function(e) {
    alert($(e.target).attr('id'));
});

Upvotes: 0

sabof
sabof

Reputation: 8192

You probably want this:

var limit = 15;

$(document).ready(function() {
  var data = 'clients=&categories=&keywords=&limit='+limit;
  $.ajax({
    type: 'POST',
    url: 'index.php?ind=work&op=get_list',
    data: data,
    success: function (data) {
      $('.list').html(data);
      $('.thumb').click(function() {
        alert($(this).attr('id'));
      });
    }
  });
});

$('.thumb').attr('id') returns the id of the first element with class thumb, no matter where it's called from.

Upvotes: 2

Related Questions