Alternativa al atributo de valor (obsoleto) para elementos li

Question

Actualmente estoy trabajando en una aplicación web con HTML 5, CSS y JQuery. Tengo una lista desordenada (ul) para mostrar enlaces de página, con cada elemento li que contiene el enlace de página. Esta lista se crea dinámicamente usando jQuery.

Lo que me gustaría hacer es hacer que los elementos de la lista solo muestren el nombre de la página en el enlace, pero al mismo tiempo conservar la ruta completa del enlace. Por ejemplo, "http://www.foo.com/xyz/contactus" se mostraría como "contactus", pero el elemento li aún "sabría" la ruta completa del enlace. Para ello, el atributo de valor de li habría sido perfecto, ya que se podía establecer como esto:

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

Esto crearía una lista como:

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

Desafortunadamente el atributo valor de li ha sido desaprobado desde HTML 4.01 (¿alguien sabe la razón detrás de esto? me parece bastante útil ...).

Por lo tanto, me gustaría obtener algunos consejos sobre cómo proceder. Una opción es ignorar la depreciación y usar el atributo de valor de todos modos, ya que todos los navegadores principales todavía lo admiten, pero no estoy muy interesado en usar una función en desuso y simplemente se siente mal.

¿Alguna idea?

Answer 1

Cambio de:

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

Para:

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

data-* patrón es la nueva forma de HTML5 de mantener los valores de los elementos DOM.

, usted puede obtener los valores en una de las dos maneras:

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

Usted puede leer this blog post of John Resig de esos atributos.

jQuery data function

Answer 2

utilizar simplemente un atributo data (intro; longer tutorial; spec):

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

Como una ventaja, jQuery convenientemente detecta y expone los valores de tales atributos a través del método .data.

Answer 3

Aunque value está desfasada, todavía se podría utilizar y acceder w/JavaScript. ¡Solo estás abandonando el estado de validación!

Como alternativa, puede utilizar los atributos data-* (como veo que otros han sugerido) o asignar valores directamente a los elementos DOM - ya que está generando este marcado en tiempo de ejecución podría agregar una propiedad como (JS le permite hacer esto es tanto una bendición como una maldición):

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

sin embargo ... si está con la intención de utilizar esto para la navegación, por qué no sólo tiene que utilizar un ancla con un href?