SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Brisbane, QLD
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessing a class attribute that has multiple values

    Hi All,

    My apologies if this is a often asked question, as I have googled and searched the forum without any luck.

    Basically I am trying to use javascript to access an element via the className function as per a script that I inherited.

    The menu for this site is generated from a CMS that provided multiple class names for each element to allow easier access to the element for styling.

    Here is an example of the html
    Code:
    <ul id="nav" class="horizontal">
    	<li class="homepage first current page_id_1872 "><a href="/home" title="Home" ><span>Home</span></a></li>
    	<li class="page_id_1873 parent_list_item "><a href="/weddings" title="Weddings" ><span>Weddings</span></a>
    		<ul class="child_list">
    			<li class="first page_id_1878 "><a href="/weddings/information" title="Information" ><span>Information</span></a></li>
    			<li class="page_id_1880 alt "><a href="/weddings/gallery" title="Gallery" ><span>Gallery</span></a></li>
    			<li class="page_id_2124 "><a href="/weddings/availability" title="Availability" ><span>Availability</span></a></li>
    			<li class="last page_id_1879 alt "><a href="/weddings/client_sites" title="Client Sites" ><span>Client Sites</span></a></li>
    		</ul>
    	</li>
    	<li class="page_id_1874 alt parent_list_item "><a href="/portraits" title="Portraits" ><span>Portraits</span></a>
    		<ul class="child_list">
    			<li class="first last page_id_2196 "><a href="/portraits/gallery" title="Gallery" ><span>Gallery</span></a></li>
    		</ul>
    	</li>
    	<li class="page_id_1876 parent_list_item "><a href="/about_us" title="About Us" ><span>About Us</span></a>
    		<ul class="child_list">
    			<li class="first last page_id_1875 "><a href="/about_us/testimonials" title="Testimonials" ><span>Testimonials</span></a></li>
    		</ul>
    	</li>
    	<li class="last page_id_1877 alt "><a href="/contact" title="Contact" ><span>Contact</span></a></li>
    </ul>
    Now the javascript I have it accesses

    Code:
    this.className="parent_list_item"
    I don't quite know how I can access this value from within a class that has multiple values? Any suggestions?
    Code:
    class="page_id_1876 parent_list_item "
    The full javascript is
    Code:
    function swap(){this.className="msieFix"}
    function swapBack(){this.className="parent_list_item"}
    function swapfocus() {this.parentNode.parentNode.parentNode.className="msieFix"}
    function swapblur() {this.parentNode.parentNode.parentNode.className="parent_list_item"}
    function nav(){// v1.0 Copyright (c) 2006 TJKDesign - Thierry Koblentz
    	if (document.getElementById){	
    	var LI = document.getElementsByTagName("li");
    	var zLI= LI.length;
    		for(var k=0;k<zLI;k++){
    			if(LI[k].id){
    //			LI[k].firstChild.href="#";
    			LI[k].className="parent_list_item";
    			}
    			if(LI[k].parentNode.parentNode.className.indexOf('parent_list_item') != -1){LI[k].firstChild.onfocus=swapfocus;LI[k].firstChild.onblur = swapblur}
    			if(LI[k].className.indexOf('parent_list_item') == -1){LI[k].onmouseover=swap;LI[k].onmouseout=swapBack}
    		}
    	}
    }
    window.onload=function(){nav();}
    Any help would be appreciated.

    Cheers,
    Colin
    Colin Burns
    http://www.cmsadvantage.com
    Founder & CEO, cmsadvantage
    The premier CMS for Web & Graphic Designers

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    use a regular expression.

    /\bparent_list_item\b/
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •