Javascript li元素的值属性（已弃用）的替代项

我目前正在使用HTML5、CSS和JQuery开发一个web应用程序。我有一个无序列表（ul）用于显示页面链接，每个li元素都包含页面链接。此列表是使用jQuery动态创建的

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

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);
    }

var ul=$（'
'）.attr（'id'，'linkList'）；
for（var i=0；i”）.text（pgName）；//将文本设置为页面名称
li.attr（'value'，linksOnPage[i].toString（））；//将该值设置为完整链接
ul.附加（li）；
}

这将创建如下列表：

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

联系方式
...

不幸的是，自从HTML4.01以来，li的value属性就被弃用了（有人知道这背后的原理吗？对我来说似乎非常有用…）

因此，我想就如何进行提出一些建议。一个选择是忽略不推荐使用的特性并使用value属性，因为所有主流浏览器仍然支持它，但我不太喜欢使用不推荐使用的特性，而且感觉不对

---

有什么想法吗？

只需使用

数据

属性（；）：

联系方式

另外，jQuery可以通过该方法方便地检测和公开这些属性的值。

更改为：

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

您可以阅读这些属性

---

jQuery

即使

值

被弃用，它仍然可以通过JavaScript使用和访问。你只是在放弃验证状态

或者，您可以使用

data-*

attributes（正如我看到其他人所建议的那样）或将值直接映射到DOM元素-因为您在运行时生成此标记，所以您可以添加这样的属性（允许您这样做的JS是福也是祸）：

---

还是。。。如果您打算将其用于导航，为什么不使用带有href的锚？

这正是我想要的，谢谢！六羟甲基三聚氰胺六甲醚。。。看来我得等9分钟才能接受你的回答reason@William. 我想我必须等到看到$15

：-）

“我想做的是让列表元素只显示链接中的页面名称，但同时保留完整的链接路径。”-这正是锚定标记的用途，锚定标记的优点是只为不（或不能）的键盘用户工作使用鼠标或其他定点设备。对于你提到的不推荐使用的属性等，遵循标准是很好的，但在我看来，遵循可访问性标准更重要…@o.v.我认为你可以对评论进行升级投票，而不是在新评论中写“同意”…@nnn：我同意，这在我身上并没有发生过。但我想我现在会坚持使用列表，因为我正在考虑使用jQueryUI使其可排序。@gdoron：是的，但您只能这样做一次。强烈的不赞成感让我感觉很好。威廉-只要在每一个列表项中加上一个锚。你仍然可以做所有你想要的列表排序和样式，但它也可以访问。。。

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

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

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

li.someLinkPath = 'some url here';
//and in the click handler you could access this as
this.someLinkPath;