[RESOLVED] change order of <li> item with javascript

**jumpinjavajoe** · 07-09-2010 01:16 PM

Is it possible to change order of <li> item with JavaScript by using a string variable?
The string variable is coming from <%=(Recordset2.Fields.Item("neworder").Value)%>.
The string variable value may be 1,2,3 or 2,3,1 or 3,2,1.
I would like the numbers in the string variable represent the <li> order or positions.
<ul>
<li><%=(Recordset2.Fields.Item("image_code_A").Value)%></li>
<li><%=(Recordset2.Fields.Item("image_code_B").Value)%></li>
<li><%=(Recordset2.Fields.Item("image_code_C").Value)%></li>
</ul>
for example: if string variable = 2,3,1 then the list would display:
<li><%=(Recordset2.Fields.Item("image_code_B").Value)%></li>
<li><%=(Recordset2.Fields.Item("image_code_C").Value)%></li>
<li><%=(Recordset2.Fields.Item("image_code_A").Value)%></li>

Thanks in advance

**Westerly** · 07-09-2010 02:34 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	var listOrder = "3,1,2";

	function init(){

		var nList = document.getElementsByTagName('ul')[0];
		var nEntry = nList.getElementsByTagName('li');	
		var nEntryCopy = [];
		for (i=0; i<nEntry.length; i++)
			{
			 nEntryCopy[nEntryCopy.length] = nEntry[i].firstChild.data;
			}
		while (nList.lastChild)
			{	
			 nList.removeChild(nList.lastChild);
			}	
		listOrder = listOrder.split(",");
		for (i=0; i<nEntryCopy.length; i++)
			{			 
			 var nEntry = document.createElement('li');	
			 nEntry.appendChild(document.createTextNode(nEntryCopy[listOrder[i]-1]));
			 nList.appendChild(nEntry);
			}		
        }	

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}

	
</style>
</head>
	<body>
		<ul>
			<li> One </li>
			<li> Two </li>
			<li> Three </li>
		</ul>
	</body>
</html>

**jumpinjavajoe** · 07-09-2010 03:16 PM

Thank you Westerly.
This is exactly what I need to work with.
Thanks so, so much.

Thread: [RESOLVED] change order of <li> item with javascript

Thread Tools

Display

[RESOLVED] change order of <li> item with javascript

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions