Reference anchor inside a td on click of this

Question

Hello again, here is what i have:

<td class="player"><a class="link" data-display="0" data-id="1" data-workdir="4">Image.jpg</a></td>

Ok, and here is my jQuery:

$(".player").click(function(){
alert($(this + " a.link").attr("data-display"));
// Código para llamar al reproductor indicado
$.post(
    "php/player.php",
    { display : $(this).attr("data-display"), id : $(this).attr("data-id"), workdir : $(this).attr("data-id") },
    function(data){
        alert(data);
    }
);

});

What i'm trying to do is to pass the attributes that are inside the anchor when a person clicks the td, it would be also great to do the same when the person clicks the tr outside the td, but the td will do. (The alert is just an experiment to see if i can reference the inside link, but it didn't work). I also know that i can put the attributes inside the td and make my life easier, but i would also like to learn.

Answer 1

You can use .find() to get a descendant element (or .children() as well, in this case), like this:

$(this).find("a.link").attr("data-display")

You can give it a try here, for other relative methods, you want the tree traversal section of the jQuery API.

Answer 2

If i get it right, this is what you need:

alert($("a.link", this).attr("data-display"));