Question

I have 20 divs with the same class (bio):

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio1 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 1</a>
</div>

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio2 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 2</a>
</div>

--------

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio20 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 20</a>
</div>

I make this ajax call when someone clicks the link with the id car:

jQuery("#car").click(function(){
    var id = $(".bio").data('id'); /* HERE IS THE PROBLEM, id is always empty */
    jQuery.ajax({  
        type: 'POST', 
        url: 'myajaxurl',  
    data: {  
       action: 'cars',
       id: id
    }
        });  
});

The problem is:

How do I get the right id value (var id) corresponding to the right link that was clicked?

Do I need a jquery each loop?

It does not seem to work, var id is always empty.

Answer 1

Use closest.

var id = $(this).closest(".bio").data('id');