asked on

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

leakim971

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

George-TCC

ASKER

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 :)

George-TCC

ASKER

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

leakim971

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

ASKER CERTIFIED SOLUTION

jello024

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

George-TCC

ASKER

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

George-TCC

ASKER

Leakim the menu is already created and the list items I just need to append the class to the li's

Thanks :)

leakim971

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

George-TCC

ASKER

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

George-TCC

ASKER

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