Wizzud that is _exactly_ what I was looking for! Thank-you!
I see this being particularly useful for storing references to other
DOM elements.
For example to store a reference on each paragraph to it's previous
sibling:
<!-- HTML -->
<p>Item 1</p>
<p>Item 2</p> <!-- save ref to item 1 -->
<p>Item 3</p> <!-- save ref to item 2 -->
<p>Item 4</p> <!-- etc... -->
<p>Item 5</p>
<p>Item 6</p>
// JavaScript
$(function(){
// store a reference on each paragraph to it's prev. sibling
$('p').each(function(){
$.data( this // element for which data is
stored
, 'previtem' // name of element reference
, $(this).prev('p') // select element/s ref. to
store
);
// clicking a paragraph manipulates it's referenced element without
'reselecting' it
}).click(function(){
// read data for clicked element
var selectitem = $.data(this, 'previtem');
// act on referenced element
$(selectitem).css('background','yellow');
// alternatively - without a varaible
$( $.data(this, 'previtem') ).css('color','red');
});
});
I imagine the more complex selector required to reference the stored
element and the more frequently it is called - the greater the
effeciency gain for using this approach.
Hope this helps someone else
Cheers again
Ollie
On Nov 5, 9:24 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Using the example data that started the post...
>
> // create a DIV with text, and append to #cardholder...
> var businessCard = jQuery('<div class="bcard">Business Card</
> div>').appendTo('#cardholder').get(0);
> // store data against the DIV element created above...
> jQuery.data( businessCard //element
> , 'businessCards' //arbitrary (non-conflicting) name
> , { 'name' : 'some name'
> , 'address' : 'some address'
> , 'phoneno' : 'some phoneno'
> , 'email' : 'some email'
> }
> );
>
> To retrieve the data (for the element stored in businessCard) at any
> time...
> var bci = jQuery.data(businessCard, 'businessCards');
>
> // add another card (not storing the element in a variable this
> time)...
> jQuery.data( jQuery('<div class="bcard">Business Card 2</
> div>').appendTo('#cardholder').get(0)
> , 'businessCards' //same name!
> , { 'name' : 'some other name'
> , 'address' : 'some other address'
> , 'phoneno' : 'some other phoneno'
> , 'email' : 'some other email'
> }
> );
>
> To retrieve all card info below #cardholder...
> var bcards = [];
> jQuery('#cardholder .bcard').each(function()
> { bcards.push(jQuery.data(this, 'businessCards')); });
>
> (or variations thereof)
