Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

How do I add a unqiue class to a li with javascript

Hi There,

I have a ul li list with a id of mainlevel_nav as the id of the ul and I want to add a clss to each li of "menu-item-1, menu-item-2 etc..."

How do I go about this with javacscript.

Cheers,
George
0
George-TCC
Asked:
George-TCC
  • 6
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
hello George-TCC,

Try :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function setClassLI() {
		document.getElementById("li1").className = "menu-item-1";
	}
</script>
<link href="lit" rel="stylesheet" type="text/css" />
</head>
<body onload="setClassLI();">
<li id="li1" class=""></li>
</body>
</html>

Open in new window

0
 
George-TCCAuthor Commented:
Hey Thanks for that but it won't work as I can't control the li element and it doesn't have an id on it. The only thing that has an id on it is the
  • tag and I need the unique menu-item class to be unique for example if I add a menu item in I need the class to go from menu-item-1 to add another one of menu-item-2 for example:
    • Menu 1
    • Menu 2
    • Menu 3
    • Menu 4
  • Thanks Again :)
0
 
George-TCCAuthor Commented:
Sorry Here is the code example of what I need
<ul id="myid">
    <li class="menu-item-1">Menu 1</li>
    <li class="menu-item-2">Menu 2</li>
    <li class="menu-item-3">Menu 3</li>
    <li class="menu-item-4">Menu 4</li>
</ul>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
leakim971PluritechnicianCommented:
Check this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function createLI() {
		var div = document.getElementById("lishere");
		for(i=1;i<9;i++) {
			var li = document.createElement('LI');
			li.id = "li" + i;
			li.innerText = "text " + i;
			li.setAttribute('className',"menu-item-" + i);
			div.appendChild(li);
		}
	}
</script>
<link href="lit" rel="stylesheet" type="text/css" />
</head>
<body onload="createLI();">
<div id="lishere"></div>
</body>
</html>

Open in new window

0
 
jello024Commented:

var oMenuList = document.getElementById('myid').getElementsByTagName('li');

for(var i = 0; i < oMenuList.length; i++)
{
   oMenuList[i].className = "menu-item-" + (i + 1);
}

Open in new window

0
 
George-TCCAuthor Commented:
Jello I'm sure yours looks right but I can't seem to get it working - I have tried putting into a function and at the end of the script running it like so myClass();

Still doesn't work - am I doing something wrong?

Thanks for the help so far Guys!

Cheers,
George
0
 
George-TCCAuthor Commented:
Leakim the menu is already created and the list items I just need to append the class to the li's

Thanks :)
0
 
leakim971PluritechnicianCommented:
OK, I see so :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function createLI() {
		var li = document.getElementsByTagName("li");
		for(i=0;i<li.length;i++) {
			li[i].setAttribute('className',"menu-item-" + i);
		}
	}
</script>
</head>
<body onload="createLI();">
    <li id="abc"></li>
    <li id="def"></li>
    <li id="ghi"></li>
    <li id="klm"></li>
</body>
</html>

Open in new window

0
 
George-TCCAuthor Commented:
Awesome Jello everything worked fine I just had to put my class in the body onLoad for it to work.

Thanks Alot for your help :)
George
0
 
George-TCCAuthor Commented:
Sorry Jello one more related question - How can I automatically add a  into the end of the li as well through your script?

Is this possible or can it not be done?

Thanks Again for your help Everyone,
George
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now