Geek asks and answers

Alternative value attribute (deprecated) for li elements

I am currently working on a web application using HTML 5, CSS and jQuery. I have an unordered list (ul) for displaying links to pages, with each li element containing a link to the page. This list is created dynamically using jQuery.

I would like the list items to display only the page name in the link, but at the same time keep the full path to the link. For example, "http://www.foo.com/xyz/contactus" will appear as a "contact", but the li element still "knows" the full path of the link. For this, the li value attribute would be ideal, as I could set them like this:

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

This will create a list like:

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

, value li HTML 4.01 (- ? ...).

, , . - value , , , .

?

+5
3

:

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

To:

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

data-* pattern - DOM HTML5.

:

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

.

jQuery data

+10

data (intro; ; spec):

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

jQuery .data.

+3

, value , JavaScript. !

data-* ( , ) DOM - , , (JS, , ):

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

... , href?

+1

More articles:


All Articles