Alternative zu (veraltet) Wert Attribut für li Elemente

Question

Ich arbeite derzeit an einer Webanwendung mit HTML 5, CSS und JQuery. Ich habe eine ungeordnete Liste (ul) zum Anzeigen von Seitenlinks, wobei jedes li-Element den Seitenlink enthält. Diese Liste wird dynamisch mit jQuery erstellt.

Was ich tun möchte ist, dass die Listenelemente nur den Seitennamen im Link anzeigen, aber gleichzeitig den vollständigen Linkpfad beibehalten. Zum Beispiel würde "http://www.foo.com/xyz/contactus" als "contactus" angezeigt, aber das li-Element würde immer noch den vollständigen Linkpfad "kennen". Zu diesem Zweck wäre der Wert Attribut li perfekt gewesen, da ich sie so einstellen könnte:

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

Leider hat sich der Wert Attribut li gewesen:

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

Diese Liste wie schaffen würde seit HTML 4.01 veraltet (jemand kennt die Gründe dafür? Scheint mir sehr nützlich ...).

Also, ich möchte einen Ratschlag, wie Sie vorgehen. Eine Möglichkeit besteht darin, die Deprecation zu ignorieren und das Wertattribut trotzdem zu verwenden, da alle gängigen Browser es immer noch unterstützen, aber ich bin nicht sehr daran interessiert, eine veraltete Funktion zu verwenden, und es fühlt sich einfach falsch an.

Irgendwelche Ideen?

Answer 1

Wechsel von:

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

An:

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

data-* Muster ist die neue HTML5 Weise Werte in DOM-Elemente zu halten.

Sie können die Werte in einem der beiden Wege erhalten:

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

Sie this blog post of John Resig auf diese Attribute lesen kann.

jQuery data function

Answer 2

einfach eine data Attribut (intro; longer tutorial; spec):

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

Als plus, jQuery erkennt und bequem macht die Werte solcher Attribute durch die .data Methode.

Answer 3

Obwohl value veraltet war, konnte es noch w/JavaScript verwendet und aufgerufen werden. Sie geben nur den Validierungsstatus auf!

Alternativ können Sie entweder data-* Attribute verwenden (wie ich andere vorgeschlagen habe) oder Werte direkt auf DOM-Elemente abbilden - da Sie dieses Markup zur Laufzeit generieren, können Sie einfach eine Eigenschaft hinzufügen (JS ermöglicht dies) dies ist ein Segen und ein Fluch):

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

Still ..., wenn Sie für diesen Einsatz Navigation sind zu wollen, warum nicht nur einen Anker mit einem href verwenden?