Question

Here is an example of my markup:

<li class="websites" id="3">
    <span class="id">3</span>
    <span><a href="http://www.google.com"><span class="url">www.google.com</span></a></span>
    <span class="action"><span class="edit">edit</span> | <span class="delete">delete</span></span>
</li>

and here is my jQuery where I am attempting to pass the id of this website (3) to another script via ajax.

$('.delete').click(function(){
        var id = $(this).find('span.id').html();

        $.ajax(
            {
                type:    "POST",
                url:     "edit.php",
                data:    ({"id":id}),
                cache:   false,
                success: function(message)
                {
                    $('#'+message).fadeOut('slow');                 
                } // end AJAX return
            }); // end AJAX call
    });

When I check my POST headers I can see that the value of id is null so obviously my attempt at trying to set it is wrong.

As you can see I have the id in the actual li element plus another span with class id aswell that have the same value.

It doesn’t matter which one is used for this bit of functionality.

Thanks.

Answer 1

var id = $(this).closest('li.websites').attr('id');

Closest finds $(this) ancestor that matches the selector, in your case, it’s li with class websites

http://api.jquery.com/closest/