'Best' way to pull data relative to a div?

Question

This answer suggested i should put my data in JS instead of a textarea.

Thinking about it i could have scripts and do something like myarray[i]="data" where i is the index of my for loop. However when i click a div how do i find out what i is? I have used var data = $(this).parent('.parent').find('.valuestr').eq(0).val(); which is extremely simple. Should i use a script or should i continue to do it with a textarea? if i should use a script 1) Whats the easiest way to find i and 2) Is it bad pratice to have dozens or hundreds of <script> in my html? or i can go through the loop twice but i still dont know the easiest way to find i. I would have to store it somewhere or go through multiple tags and count them.

Answer 1

jQuery has a data() function just for that.

You store arbitrary data related to some element like this:

$('#my_div').data('foo', 'bar');
$('#my_div').data('hello', 'world');

Then you retrieve it like this:

alert($('#my_div').data('foo'));  // alerts "bar".
alert($('#my_div').data('hello'));  // alerts "world".

Answer 2

Since each DOM_Element is just an object, you can declare a variable in the object.

for(var i = 0; i < elements.length; i++)
{
   elements[i].i = i;
   elements[i].onclick = function(){
      alert(this.i);
   }
}

Answer 3

Answering the other part of your question:

2) Is it bad pratice to have dozens or hundreds of in my html?

It will depend on who you talk to, but in general, yes, I think it is. There's actually a push for html to be completely devoid of Javascript, save loading of .js files. For more info, look into unobtrusive javascript.

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript