替换li元素的(已弃用的)value属性

Question

我目前正在使用HTML 5,CSS和JQuery开发Web应用程序.我有一个无序列表(ul)用于显示页面链接,每个li元素包含页面链接.此列表是使用jQuery动态创建的.

我想要做的是让列表元素只显示链接中的页面名称,但同时保留完整的链接路径.例如,"http://www.foo.com/xyz/contactus"将显示为"contactus",但li元素仍将"知道"完整的链接路径.为此目的,li的value属性将是完美的,因为我可以这样设置它们:

var ul = $('<ul/>').attr('id', 'linkList');
for (var i = 0; i < linksOnPage.length; i++)  // linksOnPage is an array with all the links
    {
        var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1);

        // Create list element and append content
        var li = $('<li/>').text(pgName);    // Set the text to the page name
        li.attr('value', linksOnPage[i].toString());    // Set the value to the full link

        ul.append(li);
    }

这将创建一个列表,如:

<ul>
    <li value="http://www.foo.com/xyz/contactus">contactus</li>
    ...
</ul>

不幸的是,自从HTML 4.01以来,li的value属性已被弃用(任何人都知道这背后的基本原理？对我来说似乎很有用......).

所以,我想就如何进行提出一些建议.一种选择是忽略弃用并且仍然使用value属性,因为所有主流浏览器仍然支持它,但我不是非常热衷于使用已弃用的功能而且它只是感觉不对.

有任何想法吗？

Answer 1

改变自:

<li value="http://www.foo.com/xyz/contactus">contactus</li>

至:

<li data-value="http://www.foo.com/xyz/contactus">contactus</li>

data-* pattern是保持DOM元素值的新HTML5方式.

您可以通过以下两种方式之一获取值:

$('#li-Id').data('value');
$('#li-Id').attr('data-value');

您可以在这些属性上阅读John Resig的这篇博客文章.

jQuery data函数