6

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.

JackBurton
  • 191
  • 1
  • 2
  • 7

7 Answers7

11

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);
});
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
4

val() doesn't return the id. You want $(this).attr('id') instead.

Chris G.
  • 3,963
  • 2
  • 21
  • 40
2

You're doing it wrong.

the id attribute is meant to be used as a unique identifier, not as a means of data-storage.

Additionally, .val() is meant to be used on input, select, textarea elements to access their current values.

If you need an element's attribute use the .attr() function.

If you need to store data on an element, use a custom HTML5 data- element:

<li data-id="8"...
<li data-id="13"...

You'd then be able to access the value with the .data() function:

var listItemIdentifier = $(this).data('id');
console.log( listItemIdentifier );
//should output 8 or 13 depending on which you click on
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • `.prop()` should be used instead of `.attr()` in most cases nowadays. – Matt Ball Sep 20 '11 at 18:46
  • @MattBall, good point if you're working in `1.6+`. I often have to work in slightly older versions of jQuery so I've been using `attr` out of habit. – zzzzBov Sep 20 '11 at 19:15
  • Properties and attributes should not be treated interchangeably even if JQuery allows them to be. Think of properties as boolean attributes which tend to have the same name and value `selected="selected"` or `checked="checked"`. – AlienWebguy Sep 20 '11 at 19:52
  • @AlienWebguy, i'm very well aware of that, I used to use `$(...).is(':selected')` and `$(...).is(':checked')` as a safe way of checking. I use `attr` when I need the *actual* attribute value. – zzzzBov Sep 20 '11 at 19:57
  • Yea my comment was actually for Matt :) – AlienWebguy Sep 21 '11 at 03:20
1

Try using attr() instead of val():

$(function() { 
    $('li.large_box').css('cursor', 'pointer').click(function() {
        var show_id = $(this).attr('id');
        alert(show_id);
    });
});
Matt Huggins
  • 81,398
  • 36
  • 149
  • 218
  • `.attr()` is complete overkill for getting an element's ID (see http://stackoverflow.com/questions/4651923). -1 – Matt Ball Sep 20 '11 at 18:39
  • So you downvote a legitimate answer? It looks like he's trying to learn jQuery, so I showed him how to do it in jQuery. – Matt Huggins Sep 20 '11 at 18:40
  • 1
    Just because you can access the id attribute in JQuery does not mean that is how you should reference the id. – AlienWebguy Sep 20 '11 at 18:41
  • 1
    Matt, I didn't use your way but I appreciate your answer since I am indeed new to jQuery and javascript altogether. – JackBurton Sep 20 '11 at 18:45
0

use $(this).attr('id')

<li> can't have a value with out using non standard attributes.

Jaime
  • 1,402
  • 7
  • 15
0
var show_id = $(this).attr('id');
Luke
  • 11,426
  • 43
  • 60
  • 69
Royi Namir
  • 144,742
  • 138
  • 468
  • 792
0

A id attribute is not a value attribute.

You can either set it up to get the id:

$(this).attr("id");

Or set the value in HTML

<li id="8" value="8" class="large_box">Item 1</li>

Here is a live example: http://jsfiddle.net/BBm4R/

Drake
  • 3,851
  • 8
  • 39
  • 48