?
Solved

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

Posted on 2010-01-12
10
Medium Priority
?
225 Views
Last Modified: 2013-12-12
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
Comment
Question by:George-TCC
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
10 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 26298753
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
 

Author Comment

by:George-TCC
ID: 26298836
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
 

Author Comment

by:George-TCC
ID: 26298847
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.

 
LVL 82

Expert Comment

by:leakim971
ID: 26298905
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
 
LVL 6

Accepted Solution

by:
jello024 earned 2000 total points
ID: 26298916

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
 

Author Comment

by:George-TCC
ID: 26299035
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
 

Author Comment

by:George-TCC
ID: 26299046
Leakim the menu is already created and the list items I just need to append the class to the li's

Thanks :)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26299083
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
 

Author Comment

by:George-TCC
ID: 26299088
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
 

Author Comment

by:George-TCC
ID: 26299177
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: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question