PDA

View Full Version : assinging classname dynamically to nested list



smrdo
12-19-2008, 01:19 PM
I have the following (this is just a skeleton example) menu which is created by a cms (Immediacy). I need to loop through the nested lists and change the class names


<ul>
<li>
<ul class="need">
<li>
<ul class="needSubLevel"> </ul><!-- this works fine -->
</li>
</ul>
</li>
<li>
<ul class="need">etc..</ul>
</li>
<li>
<ul class="need">etc..</ul>
</li>
</ul>


so i have the following function, which finds any sublevel <ul> and assigns a class of "needSubLevel"


function applyClassNavSubLevel() {
var topDIV = document.getElementById("nav");
var subList = topDIV.getElementsByTagName("ul");
var subItem = topDIV.getElementsByTagName("li");
var subSubList = topDIV.getElementsByTagName("ul");
var subSubListLi = topDIV.getElementsByTagName("li");
var subSubListUl = topDIV.getElementsByTagName("ul");
for (var i = 1; i < subSubListUl.length; i++){
if(subSubListUl[i].className.match("need") != "need")
subSubListUl[i].className = "needSubLevel";
}

}

in addtion to this, i need to loop through and change the parent ul (the ones with an initial class of "need") to something unique, i.e need1, need2, need3

there will only be 3 of these, but there could be anyamount of the sub levels items. The cms dynamically creates the menu, so i cant assing the names in the initla code, it has to be after it has rendered.
hope that makes sense
thanks in advance

vwphillips
12-19-2008, 03:43 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.cls {
background-Color:yellow;
}
.cls1 {
background-Color:red;
}
.cls2 {
background-Color:green;
}
.cls3 {
background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
var ul=document.getElementsByTagName('UL')[nu||0];
ul.className=cls;
uls=ul.getElementsByTagName('UL')
for (var zxc0=0;zxc0<uls.length;zxc0++){
var zul=uls[zxc0],cnt=0;
while (zul.parentNode&&zul!=ul){
if (zul.nodeName=='UL') cnt++;
zul=zul.parentNode;
}
uls[zxc0].className=cls+cnt;
}
}

/*]]>*/
</script></head>

<body onload="UL('cls',0);">
<ul>
<li>Tom
<ul>
<li>Tom 1
<ul>
<li>Tom 1 1
<ul id="tst" >
<li>Tom 1 1 1</li>
<li>Tom 1 1 2</li>
</ul>
</li>
<li>Tom 1 2</li>
</ul>
</li>
<li>Tom 2</li>
</ul>
</li>
<li>****</li>
</ul>
</body>

</html>

smrdo
12-19-2008, 03:57 PM
thanks very much,

the only problem is that the parent levels are all assigned as class="cls1", these need to be unique, so if possible cls1, cls2, cls3,

vwphillips
12-19-2008, 04:33 PM
not sure I understand the problem
but


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.cls1 {
background-Color:yellow;
}
.cls2 {
background-Color:red;
}
.cls3 {
background-Color:green;
}
.cls4 {
background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
var ul=document.getElementsByTagName('UL')[nu||0];
ul.className=cls+1;
uls=ul.getElementsByTagName('UL')
for (var zxc0=0;zxc0<uls.length;zxc0++){
var zul=uls[zxc0],cnt=0;
while (zul.parentNode&&zul!=ul){
if (zul.nodeName=='UL') cnt++;
zul=zul.parentNode;
}
uls[zxc0].className=cls+(cnt+1);
}
}

/*]]>*/
</script></head>

<body onload="UL('cls',0);">
<ul>
<li>Tom
<ul>
<li>Tom 1
<ul>
<li>Tom 1 1
<ul id="tst" >
<li>Tom 1 1 1</li>
<li>Tom 1 1 2</li>
</ul>
</li>
<li>Tom 1 2</li>
</ul>
</li>
<li>Tom 2</li>
</ul>
</li>
<li>****</li>
</ul>
</body>

</html>

or show the HTML code with the class hard coded

smrdo
12-19-2008, 04:54 PM
I've posted an example f the rendered nav as out put by the css, bascially the three instnqaces of the class cls2 need to be unique, whiles any instqances of cls3 need to remian the same. Hope this code illustrates it a little clearer, thanks
- so all second level drop downs have the same class name, first level drop downs (x3) have a unique class name


<ul class="cls1">
<li><a class="Home" title="Home" href="/princestrust/default.aspx"> Home </a> </li>
<li><a href="/princestrust/home.aspx" title="Home" class="Home"> Home </a> </li>
<li><a href="/princestrust/need_help.aspx" title="Need help?" class="Needhelp_sel"> Need help? </a>
<ul class="cls2"><!-- needs to be unique -->
<li><a href="/princestrust/need_help/the_team_programme.aspx" title="The Team Programme" class="TheTeamProgramme"> The Team Programme </a> </li>
<li><a href="/princestrust/need_help/get_into_short_courses.aspx" title="Get into Short Courses" class="GetintoShortCourses"> Get into Short Courses </a> </li>
<ul class="cls3">
<li><a href="/princestrust/need_help/inspiring_stories/about_the_trust.aspx" title="The Trust" class="TheTrust"> The Trust </a> </li>
<li><a href="/princestrust/need_help/inspiring_stories/about_team_success.aspx" title="About Team success" class="AboutTeamsuccess"> About Team success </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/news_1.aspx" title="News #1" class="News#1"> News #1 </a> </li>
<li><a href="/princestrust/need_help/my_events.aspx" title="My Events" class="MyEvents"> My Events </a>
<ul class="cls3">
<li><a href="/princestrust/need_help/my_events/event1.aspx" title="event1" class="event1"> event1 </a> </li>
<li><a href="/princestrust/need_help/my_events/event2.aspx" title="event2" class="event2"> event2 </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/insertanything.aspx" title="InsertAnything" class="InsertAnything"> InsertAnything </a> </li>
<li><a href="/princestrust/need_help/new_page.aspx" title="New Page" class="NewPage"> New Page </a>
<ul class="cls3">
<li><a href="/princestrust/need_help/new_page/new_page.aspx" title="New Page" class="NewPage_sel"> New Page </a> </li>
<li><a href="/princestrust/need_help/new_page/new_page-1.aspx" title="New Page" class="NewPage"> New Page </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/embedsite.aspx" title="embedSite" class="embedSite"> embedSite </a> </li>
<li><a href="/princestrust/need_help/regularform.aspx" title="REgularForm" class="REgularForm"> REgularForm </a> </li>
<li><a href="/princestrust/need_help/newbanner.aspx" title="newbanner" class="newbanner"> newbanner </a> </li>
<li><a href="/princestrust/need_help/positivestories.aspx" title="PositiveStories" class="PositiveStories"> PositiveStories </a> </li>
</ul>
</li>
<li><a href="/princestrust/support_us.aspx" title="Support us" class="Supportus"> Support us </a>
<ul class="cls2"><!-- needs to be unique -->
<li><a href="/princestrust/support_us/test.aspx" title="test" class="test"> test </a>
<ul class="cls3">
<li><a href="/princestrust/support_us/test/sublevel.aspx" title="sublevel" class="sublevel"> sublevel </a> </li>
<li><a href="/princestrust/support_us/test/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
</ul>
</li>
<li><a href="/princestrust/support_us/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
<li><a href="/princestrust/support_us/me.aspx" title="me" class="me"> me </a> </li>
</ul>
</li>
<li><a href="/princestrust/about_the_trust.aspx" title="About The Trust" class="AboutTheTrust"> About The Trust </a>
<ul class="cls2"><!-- needs to be unique -->
<li><a href="/princestrust/about_the_trust/celebrate_success.aspx" title="Celebrate success" class="Celebratesuccess"> Celebrate success </a> </li>
<li><a href="/princestrust/about_the_trust/what_we_do.aspx" title="what we do" class="whatwedo"> what we do </a> </li>
</ul>
</li>
</ul>

vwphillips
12-19-2008, 06:02 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.cls1 {
background-Color:yellow;
}

.cls2 {
background-Color:red;
}

.cls21 {
background-Color:#CC33FF;
}
.cls22 {
background-Color:#FFCC66;
}
.cls23 {
background-Color:#99FFCC;
}

.cls3 {
background-Color:green;
}
.cls4 {
background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
var ul=document.getElementsByTagName('UL')[nu||0];
ul.className=cls+1;
uls=ul.getElementsByTagName('UL')
for (var cnt2=1,zxc0=0;zxc0<uls.length;zxc0++){
var zul=uls[zxc0],cnt=1;
while (zul.parentNode&&zul!=ul){
if (zul.nodeName=='UL') cnt++;
zul=zul.parentNode;
}
if (cnt==2) uls[zxc0].className=cls+cnt+(cnt2++);
else uls[zxc0].className=cls+cnt;
}
}

/*]]>*/
</script>
</head>

<body onload="UL('cls',0);">

<ul >
<li><a class="Home" title="Home" href="/princestrust/default.aspx"> Home </a> </li>
<li><a href="/princestrust/home.aspx" title="Home" class="Home"> Home </a> </li>
<li><a href="/princestrust/need_help.aspx" title="Need help?" class="Needhelp_sel"> Need help? </a>
<ul ><!-- needs to be unique -->
<li><a href="/princestrust/need_help/the_team_programme.aspx" title="The Team Programme" class="TheTeamProgramme"> The Team Programme </a> </li>
<li><a href="/princestrust/need_help/get_into_short_courses.aspx" title="Get into Short Courses" class="GetintoShortCourses"> Get into Short Courses </a> </li>
<ul >
<li><a href="/princestrust/need_help/inspiring_stories/about_the_trust.aspx" title="The Trust" class="TheTrust"> The Trust </a> </li>
<li><a href="/princestrust/need_help/inspiring_stories/about_team_success.aspx" title="About Team success" class="AboutTeamsuccess"> About Team success </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/news_1.aspx" title="News #1" class="News#1"> News #1 </a> </li>
<li><a href="/princestrust/need_help/my_events.aspx" title="My Events" class="MyEvents"> My Events </a>
<ul >
<li><a href="/princestrust/need_help/my_events/event1.aspx" title="event1" class="event1"> event1 </a> </li>
<li><a href="/princestrust/need_help/my_events/event2.aspx" title="event2" class="event2"> event2 </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/insertanything.aspx" title="InsertAnything" class="InsertAnything"> InsertAnything </a> </li>
<li><a href="/princestrust/need_help/new_page.aspx" title="New Page" class="NewPage"> New Page </a>
<ul >
<li><a href="/princestrust/need_help/new_page/new_page.aspx" title="New Page" class="NewPage_sel"> New Page </a> </li>
<li><a href="/princestrust/need_help/new_page/new_page-1.aspx" title="New Page" class="NewPage"> New Page </a> </li>
</ul>
</li>
<li><a href="/princestrust/need_help/embedsite.aspx" title="embedSite" class="embedSite"> embedSite </a> </li>
<li><a href="/princestrust/need_help/regularform.aspx" title="REgularForm" class="REgularForm"> REgularForm </a> </li>
<li><a href="/princestrust/need_help/newbanner.aspx" title="newbanner" class="newbanner"> newbanner </a> </li>
<li><a href="/princestrust/need_help/positivestories.aspx" title="PositiveStories" class="PositiveStories"> PositiveStories </a> </li>
</ul>
</li>
<li><a href="/princestrust/support_us.aspx" title="Support us" class="Supportus"> Support us </a>
<ul ><!-- needs to be unique -->
<li><a href="/princestrust/support_us/test.aspx" title="test" class="test"> test </a>
<ul >
<li><a href="/princestrust/support_us/test/sublevel.aspx" title="sublevel" class="sublevel"> sublevel </a> </li>
<li><a href="/princestrust/support_us/test/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
</ul>
</li>
<li><a href="/princestrust/support_us/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
<li><a href="/princestrust/support_us/me.aspx" title="me" class="me"> me </a> </li>
</ul>
</li>
<li><a href="/princestrust/about_the_trust.aspx" title="About The Trust" class="AboutTheTrust"> About The Trust </a>
<ul ><!-- needs to be unique -->
<li><a href="/princestrust/about_the_trust/celebrate_success.aspx" title="Celebrate success" class="Celebratesuccess"> Celebrate success </a> </li>
<li><a href="/princestrust/about_the_trust/what_we_do.aspx" title="what we do" class="whatwedo"> what we do </a> </li>
</ul>
</li>
</ul>
</body>

</html>

smrdo
01-05-2009, 01:23 PM
great, worked a treat thanks