jQuery $(this).val returns 0

Question

I have a simple list like this:

<ul id="large_box_custom_list">
<li id="8" class="large_box">Item 1</li>
<li id="13" class="large_box">Item 2</li>
</ul>

then I have a jQuery function like this:

$(function() { 
$('li.large_box').css('cursor', 'pointer')
.click(function() {
    var show_id = $(this).val();
    alert(show_id);
    });
});

When I click the list items my alery shows a value of 0 when I am expecting a value of 8 or 13.

Answer 1

Because you should be using the standard DOM element id property. jQuery's .val() method has nothing to do with an element's ID.

$('li.large_box').css('cursor', 'pointer').click(function ()
{
    var show_id = this.id;
    alert(show_id);
});