Trouble with jQuery and .attr('value')

Question

I have a list, with a value on each list item like so:

<ul>
    <li value='red'>red</li>
    <li value='grn'>green</li>
    <li value='prp'>purple</li>
    <li value='blu'>blue</li>
</ul>

I needed to retrieve the value of the list items, so turned to jQuery (1.3.2):

$('li:first').val();

This throws a javascript error. I'm forgiving of jQuery here as li is not a form element, I'll just do it the 'hard way' i tell myself:

$('li:first').attr('value');

This does not throw an error, but it does return '-1' no matter which element I am matching. Clearly, -1 is not the value for any of the elements. After fiddling for a few minutes to make sure I've spelled everything correctly I try this on a whim

$('li:first').attr('Value'); //notice capital V

This returns 'red', the correct value. To make sure I am not crazy, I try some more

$('li:first').attr('vAluE');
$('li:first').attr('vaLue');
$('li:first').attr('VALUE');

It appears as though every combination of mixed cases work, so long as you do not use only lowercase 'value'. It works fine if I rename my attribute to anything other than 'value' (non-valid html), but I would sooner keep it valid if I could. Is there a reason jQuery is behaving like this, or should I consider it a bug?

-edit- I realize the value attribute has been depreciated on the li element. The real issue I am having is that regardless of it being depreciated, I am infact using an attribute named 'value' and asking jQuery to tell me it's value. It is incorrectly returning -1.

Answer 1

Value is used in lists only with ordered lists like so:

<ol>
  <li value="5">Item One</li>
  <li value="10">Item Two</li>
</ol>

This would be displayed like this:

5. Item One
10. Item Two

This could be the reason jQuery is acting funny.

Answer 2

@jeerose's explanation sounds plausible to me. Any reason you can't change value="" to val=""?

Answer 3

value is depreciated for li and was used to set the number of the list item. Using another name works.

Answer 4

This may possibly be related? http://dev.jquery.com/ticket/4160

In summary:

resolution set to invalid
In HTML4 the value attribute of an li gives you the ordered list number:

http://www.w3schools.com/tags/att_li_value.asp

So the cause lies outside jQuery, you can see it from this example:

<li id="arf" value="dog"></li>
alert(document.getElementById("arf").value);