1


I want to store elements as the keys in my array and object as values,for example - 

var arr = [];
arr[ document.getElementById('something') ] = { data: 'something' , fn : function(){ } };

But the problem is: If I will add another element with the key of : document.getElementById('otherthing'). And later will try to get the value of : arr[ document.getElementById('something') ].data , I will get the value of arr[ document.getElementById('otherthing') ].
For Example :

var arr = [];
arr[ document.getElementById('something') ] = { data: 'something' , fn : function(){ } };
arr[ document.getElementById('otherthing') ] = { data: 'otherthing' , fn : function(){ alert('k'); } };
alert( arr[ document.getElementById('otherthing') ].data ); // alerts "otherthing"
alert( arr[ document.getElementById('something') ].data ); // alerts "otherthing" but suppose to alert "something"

How I can fix this problem,I can`t save by id,because I want to support other nodes with no-id
Thanks,Yosy.

EDIT:My answer to this,If you have better answer please write it :) (Inspired by casablanca`s answer)
array for id: key-integer the node id, value the node it self
and the array with data and fn with key of my id,It will look like this : 

var idArray = [],nodeArray = [];

idArray[0] = document.getElementById('hello_ducks');
nodeArray[0] = { data: 'hello ducks!!' , fn : function(){ alert('k'); } };

idArray[1] = document.getElementById('hello');
nodeArray[1] = { data: 'hello' , fn : function(){ } };

var testNode = document.getElementById('hello_ducks'), foundId = -1 /*found id*/;
// Do we have testNode in our array?
for(var i = 0 ; i < idArray.length; i++ ){
  if( idArray[i] === testNode ){
    foundId = i;
   }
}

// Do we found our element?
if(foundId >= 0) {
    alert( nodeArray[foundId].data ); // "hello ducks!!"
}
Improve this question
2
  • If you want to use jQuery, there is a .data method, that may be what you want. api.jquery.com/data Commented Oct 4, 2010 at 19:40
  • See my updated answer for a simpler method. Commented Oct 4, 2010 at 20:30

2 Answers 2

Reset to default
1

I can`t save by id,because I want to support other nodes with no-id

You should keep in mind that in order to get back a node from the array, you have to somehow identify it. If a node doesn't have any such unique identifier, then how do you retrieve it later from the array, or even store it in the first place?

In lower-level languages like C++, every object implicitly has a unique address, but there is no such thing you can use in JavaScript, so you need to manually provide some way of identifying an object, and the DOM ID is the most convenient way of doing this.

If some of your nodes don't initially have an ID, the best way to proceed is to simply assign your own unique ID.

Update: The solution you posted will work, but it's not very efficient because you need to search the entire array every time you need to find a node. Why not simply assign your own ID to those elements which don't have one? For example:

var nextID = 0;
function getID(elem) {
  if (elem.hasAttribute('id') == false || elem.id == '')
    elem.id = 'dummy-' + (++nodeID);
  return elem.id;
}

This way you can always use the ID as a key:

var nodeArray = [];

var e = document.getElementById('hello');
nodeArray[getID(e)] = { ... };

var e = /* element obtained from somewhere, doesn't have an ID */
nodeArray[getID(e)] = { ... }; // still works
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I think I will store it as: nodeName(div)+id/class+parentNodeName,and with object value I will add "node" property to check if this is the node that i need
@Yosy: Any scheme will work, but just make sure that you get a unique key for each element. If you use the element class name, you may end up with the same key for different elements.
My component which I am creating currently,needs to work with 3rd party components,If I will give it an ID it could destroy 3rd party components?
We're only assigning a new ID if it already doesn't have one, otherwise it's just going to use the existing ID. So I don't think it could "destroy" anything. Even if you have two people doing the same thing, one of them would assign an ID first and the second would use the existing ID.
I am fine with this solution,but a problem that can be happened is - if I saved element X with id of 'dummy-1' (I gave him the id).If the user will change the id with JavaScript to 'main_content' for example,It will not work.
|
1

I would suggest that instead of using an array for this purpose, you take advantage of the DOM-elements being objects:

document.getElementById('something').info = {data: 'something', fn: function () { } };

but you may end up with some issues with memory leaks in certain older browsers (read: ie6). That is fixed if you use jQuery's data storage instead:

$("#something").data("info", {data: 'something', fn: function () { } });
Improve this answer

1 Comment

I can`t do this,I need to store the elements in the array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.