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
George-TCCAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.