Somename Somename - 1 month ago 5x
HTML Question

Javascript not showing value of list item

<ul class="myul">
<li value="2" data-liname="2">2</li>
<li value="3" data-liname="3">3</li>
<li value="3+" data-liname="3+">3+</li>

With jQuery :

$(".myul li").on("click", function(){
var myval = $(this).data("liname");
var myval1 = $(this).val();

When I select
I can get the value of
but with
it shows only 3 and not 3+.
works fine for other values. Only when a nimber has the
sign it chooses to ignore it.

What am I doing wrong?


With li values attributes, they specify a number value for ordering in an ordered list. Only number parts are taken from the values, thus making your 3+ become a 3. Here's a snippet demonstrating what happens:

<ol class="myul">
    <li value="2" data-liname="2">2nd</li>
    <li data-liname="2">3rd</li>
    <li data-liname="2">4th</li>
    <li data-liname="2">5th</li>
    <li value="100+@#$**$&">100th, notice string part is removed</li>

    <li value="105+">105th, notice + is removed</li>

Notice that this is an ol, or ordered list. What the value attribute does is set the number of ordering. In the above snippet you can see that the non-number parts are removed from value, leaving only number parts for ordering.

What this all means is that when you call $(this).val(), it returns the value attribute. But since the value attribute gets rid of all parts after the first non-numeric character because they are not used in ordering ordered lists, it gives you 3, instead of 3+.