Friday, November 21, 2008

jQuery Data method

I got this amazing tip from an article named “5 tips for better jQuery code”.

This is a great way to associate any amount of data with any element on the page, here is a small example:

    <title>jQuery Data() method</title>
    <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //create meaningless list
            for(var i=0;i < 10;i++)
                $("#list").append("<li>" + i + "</li>");
            var prevSum = 0;
            //will show the pwr of index and sum with all previous items
            $("#list li").each(function(indx, obj)
                prevSum = prevSum + indx;
                //attach data to each list item
                $(this).data("Data", {pwr: indx*indx, sum: prevSum });
                //Show it
                $(this).html($(this).html() + ": pwr=" + $(this).data("Data").pwr + ",sum=" + $(this).data("Data").sum);
    <ul id="list">
            <!--the items will be added here -->



The interesting part is that the data is not shown in the source code…

1 comment:

  1. it's not in the source because it was added dynamically, therefore hosted in the DOM...