QUALITY TEST: extend $ li val();

https://forum.jquery.com/topic/val-and-buttons-li-s

by nickadeemus2002

HTML

<div style="display: none;">
<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
<button>foobarbutton</button>
<div>some div</div>
</div>
<pre id="output"></pre>

CSS

pre {
    width: 500px;
  height: 300px;
   border: 1px solid black; 
}

JavaScript

var v = "";
function debug(str) {
    v += "\n"+ str;
    $("#output").html(v); 
}

debug("$(\"div\").val() : " + $("div").val());
debug("$(\"div\")[0].value : " + $("div")[0].value);
debug("$(\"button\").val() : " + $("button").val());
debug("$(\button\")[0].value : " + $("button")[0].value);
debug("$(\"ul li:first\").val() : " + $("ul li:first").val());
debug("$(\"ul li:first\")[0].value : " + $("ul li:first")[0].value);

jQuery.extend({
    valHooks: {
        li: {
            get: function( elem ) {
                var ret = elem.getAttribute("value");
                return ret ? ret : "";
            }
        }
    }
});
debug("");
debug("After adding hooks:");
debug("$(\"div\").val() : " + $("div").val());
debug("$(\"div\")[0].value : " + $("div")[0].value);
debug("$(\"button\").val() : " + $("button").val());
debug("$(\button\")[0].value : " + $("button")[0].value);
debug("$(\"ul li:first\").val() : " + $("ul li:first").val());
debug("$(\"ul li:first\")[0].value : " + $("ul li:first")[0].value);