Somename Somename - 2 months ago 7
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>
</ul>


With jQuery :

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


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

What am I doing wrong?

Answer

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>101th</li>

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

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+.