custom selectmenu: markup creation loop improvements

js/jquery.mobile.forms.select.custom.js

@@ -408,49 +408,65 @@
 
 				self.list.empty().filter( ".ui-listview" ).listview( "destroy" );
 
-				// Populate menu with options from select element
-				self.select.find( "option" ).each( function( i ) {
-					var $this = $( this ),
-						$parent = $this.parent(),
-						text = $this.getEncodedText(),
-						anchor = "<a href='#'>"+ text +"</a>",
-						classes = [],
-						extraAttrs = [];
-
-					// Are we inside an optgroup?
-					if ( $parent.is( "optgroup" ) ) {
-						var optLabel = $parent.attr( "label" );
-
-						// has this optgroup already been built yet?
-						if ( $.inArray( optLabel, optgroups ) === -1 ) {
-							lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
-							optgroups.push( optLabel );
+				var $options = self.select.find("option"),
+					numOptions = $options.length,                      
+					select = this.select[ 0 ],                         
+					dataPrefix = 'data-' + $.mobile.ns,                 
+					dataIndexAttr = dataPrefix + 'option-index', 
+					dataIconAttr = dataPrefix + 'icon',
+					dataRoleAttr = dataPrefix + 'role',
+					fragment = document.createDocumentFragment(),
+					optGroup;
+
+				for (var i = 0; i < numOptions;i++){				
+					var option = $options[i],
+						$option = $(option),
+						parent = option.parentNode,
+						text = $option.text(),			
+						anchor  = document.createElement('a');
+						classes = [];				
+
+					anchor.setAttribute('href','#');							
+					anchor.appendChild(document.createTextNode(text));	
+
+					// Are we inside an optgroup?									
+					if (parent !== select && parent.nodeName.toLowerCase() === "optgroup"){
+						var optLabel = parent.getAttribute('label');
+						if ( optLabel != optGroup) {						
+							var divider = document.createElement('li');
+							divider.setAttribute(dataRoleAttr,'list-divider');
+							divider.setAttribute('role','option');
+							divider.setAttribute('tabindex','-1');
+							divider.appendChild(document.createTextNode(optLabel));
+							fragment.appendChild(divider);
+							optGroup = optLabel;
 						}
+					}															
+
+					if (!placeholder){				
+						if ( !option.getAttribute( "value" ) || text.length == 0 || $option.jqmData( "placeholder" ) ) {
+							if ( o.hidePlaceholderMenuItems ) {
+								classes.push( "ui-selectmenu-placeholder" );
+							}						
+							placeholder = self.placeholder = text;
+						}				
 					}
-
-					// Find placeholder text
-					// TODO: Are you sure you want to use getAttribute? ^RW
-					if ( !this.getAttribute( "value" ) || text.length == 0 || $this.jqmData( "placeholder" ) ) {
-						if ( o.hidePlaceholderMenuItems ) {
-							classes.push( "ui-selectmenu-placeholder" );
-						}
-						placeholder = self.placeholder = text;
-					}
-
-					// support disabled option tags
-					if ( this.disabled ) {
+
+					var item = document.createElement('li');															
+					if ( option.disabled ) {
 						classes.push( "ui-disabled" );
-						extraAttrs.push( "aria-disabled='true'" );
+						item.setAttribute('aria-disabled',true);
 					}
-
-					lis.push( "<li data-" + $.mobile.ns + "option-index='" + i + "' data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" );
-				});
-
-				self.list.html( lis.join(" ") );
-
-				self.list.find( "li" )
-					.attr({ "role": "option", "tabindex": "-1" })
-					.first().attr( "tabindex", "0" );
+					item.setAttribute(dataIndexAttr,i);
+					item.setAttribute(dataIconAttr,dataIcon);
+					item.setAttribute('class',classes.join(" "));										
+					item.setAttribute('role','option');
+					item.setAttribute('tabindex','-1');
+					item.appendChild(anchor);					
+					fragment.appendChild(item);
+				}	
+				fragment.firstChild.setAttribute('tabindex',0);
+				self.list[0].appendChild(fragment);
 
 				// Hide header close link for single selects
 				if ( !this.isMultiple ) {