<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Data() Method</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(
function(){
var jLink1 = AddLink( "Kit", 4, "Cute" );
var jLink2 = AddLink( "Michelle", 43, "Fun", jLink1 );
var jLink3 = AddLink( "Sarah", 3943, "Stubby", jLink2 );
var jLink4 = AddLink( "Lori", 23, "Sassy", jLink3 );
var jLink5 = AddLink( "Niki", 9, "Angry", jLink4 );
}
);
function AddLink( strName, intID, strProperty, jPrevLink ){
var jParent = $( "ul:first" );
var jListItem = $( "<li></li>" );
var jLink = $( "<a>" + strName + "</a>" );
jLink.data(
"Data",
{
Name: strName,
ID: intID,
Property: strProperty,
Prev: jPrevLink
}
);
jLink
.attr( "href", "javascript:void(0)" )
.click( ClickHandler )
;
jParent.append(
jListItem.append( jLink )
);
return( jLink );
}
function ClickHandler( objEvent ){
var jThis = $( this );
var objData = jThis.data( "Data" );
alert(
objData.Name +
" is " +
objData.Property +
(
objData.Prev ?
"\n\nPrevious Girl: " +
objData.Prev.data( "Data" ).Name
:
""
)
);
objEvent.preventDefault();
return( false );
}
</script>
</head>
<body>
<h1>
jQuery Data() Method
</h1>
<ul>
</ul>
</body>
</html>