PDA

View Full Version : "for()" and "var".



jlizarraga
01-30-2009, 10:19 PM
Hi all,

Which of the following is a better method of creating and appending elements using a for() loop? (or if I'm missing the mark entirely, please let me know! :P)


var oA = new Array();
for(var i in someObject){
oA[i] = document.createElement("a");
oA[i].href = someObject[i].href;
oA[i].appendChild(document.createTextNode(someObject[i].text));
someContainer.appendChild(oA[i]);
}


for(var i in someObject){
(function(){
var oA = document.createElement("a");
oA.href = someObject[i].href;
oA.appendChild(document.createTextNode(someObject[i].text));
someContainer.appendChild(oA);
})();
}

Thanks!

Nile
01-30-2009, 10:23 PM
The second one. The first one is simply making an array with the key of the keys of sameObject, if you needed to locate that later then I'd use the first one. Although I don't think that you need the selected.


for(var i in someObject){
(function(){
var oA = document.createElement("a");
oA.href = someObject[i].href;
oA.appendChild(document.createTextNode(someObject[i].text));
someContainer.appendChild(oA);
})();
}

jlizarraga
01-30-2009, 10:42 PM
Thanks Nile.

Nile
01-30-2009, 10:54 PM
Glad to help you jlizarraga.


I was wondering, did you test your code example #2 in your first post?

jlizarraga
01-30-2009, 11:07 PM
I didn't test that exact code, but here's something similar I'm using in an app to apply an IE6 hover fix on dynamically created elements. This is the code that prompted this question.


var oClasses = ["mm3_LargeResult", "mm3_TileResult", "mm3_SmallResult", "mm3_TextOnlyRow"];
for(var i=0; i<oClasses.length; i++){
(function(){
var oElements = YAHOO.util.Dom.getElementsByClassName(oClasses[i]);
var oHoverClass = oClasses[i] + "_hover";
for(var j=0; j<oElements.length; j++){
oElements[j].onmouseover = function(){
YAHOO.util.Dom.addClass(this, oHoverClass);
}
oElements[j].onmouseout = function(){
YAHOO.util.Dom.removeClass(this, oHoverClass);
}
}
})();
}

This code is working fine for me but only runs in IE6 (I'm using browser detection for that... is there a feature detection method for determining :hover/:active limitations?). If I take out the self-executing function, it doesn't work, and following my first example for any "var" declarations doesn't work in this case either.

Twey
01-30-2009, 11:37 PM
(function(){
for(var x in someObject) {
var oA = document.createElement("a");

oA.href = someObject[x].href;
oA.appendChild(document.createTextNode(someObject[x].text));
someContainer.appendChild(oA);
}
})();Recreating the function on each iteration is wasteful and pointless (since the iterator variable is still leaked to the outside scope anyway).

Nile
02-01-2009, 12:30 AM
Mhhmmm.. I didn't think it would work because your putting it in a function. But since you didn't test it.. Ya never know, huh?

jscheuer1
02-01-2009, 01:16 AM
Also though, using the array method (looking back to post #1 in this thread), could have speed advantages should you wish to access the created elements later in a for(var i = 0; i < oA.length; ++i) type loop. That is, if the array were created as a normal javascript array:


var oA = new Array(), num = 0;
for(var i in someObject){
oA[num] = document.createElement("a");
oA[num].href = someObject[i].href;
oA[num].appendChild(document.createTextNode(someObject[i].text));
someContainer.appendChild(oA[num++]);
}