Results 1 to 8 of 8

Thread: "for()" and "var".

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default "for()" and "var".

    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)

    Code:
    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]);
    }
    Code:
    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!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Code:
    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);
    	})();
    }
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    jlizarraga (01-30-2009)

  4. #3
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Thanks Nile.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Glad to help you jlizarraga.


    I was wondering, did you test your code example #2 in your first post?
    Jeremy | jfein.net

  6. #5
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    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.

    Code:
    		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.

  7. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    (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).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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?
    Jeremy | jfein.net

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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++]);
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •