Using JS to apply classes to list items

[Steve100]

Hi I want to use JS to apply a class to the last list element in a list with a class list-items. I cobbled together something but I can't get it to work

function removeUnderline () {
	
	  // get all ul elements
          var List = document.getElementsByTagName("ul");	
	   
         // if element has a class list-links
         if (List.className == "list-links") {		
	         
                 // loop through list items
                 for (i=0; i<List.childNodes.length; i++) {
				 
                           // for the last list item give it a class of no-underline
                           if (List.lastChild) {					  
                                   List.lastChild.className= "no-underline";			 
				 }			 
		}	
		
	}	
}

any ideas?

Steven

[Ize]

Take note that document.getElementsByTagName returns an array of elements, not a single element. Therefore, you cannot check for a className on that collection.

You have to either figure out at what position in the collection your list exists, or target the list by id:

var List = document.getElementsByTagName('ul')[0];
// or...
var List = document.getElementById('myList');

Furthermore, there's no need to loop through its childNodes, because you know exactly which childnode you want to manipulate:

function removeUnderline () {
          var List = document.getElementsByTagName("ul")[0];	
 
         // if element has a class list-links
         if (List.className == "list-links") {		
     	 // for the last list item give it a class of no-underline
              if (List.lastChild) {					  
                List.lastChild.className= "no-underline";			
	      }
	}	
}

[Kravvitz]

Well, it doesn't work because it doesn't make sense.

document.getElementsByTagName() returns a NodeList (acts like an Array), so you need to loop through it.

lastChild is a reference to the last child node of the element. The last node might be a text node, comment node, or an element node.

Another issue is that an element can belong to more than one class.

Try this.

function removeUnderline () {

  // get all ul elements
  var item,Lists = document.getElementsByTagName("ul");
  for(var i=0; i<Lists.length; i++) {
    if(hasClassName(Lists[i], "list-links")) {
      // for the last list item give it a class of no-underline         
      item = Lists[i].lastChild;
      while((item.nodeType != 1) && item.previousSibling) {
        item = item.previousSibling;
      }
      if(item.nodeName.toLowerCase() == 'li') {
        addClassName(item,"no-underline");
      }
    }
  }  
}
function hasClassName(el,c){
  c=c.replace(/\-/g,'\\-');
  return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
  if(hasClassName(el,c)) return;
  var curClass=el.className;
  el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
  var re=new RegExp(c.replace(/\-/g,'\\-')+'\\s*');
  el.className=el.className.replace(re,'').replace(/^\s*|\s*$/g,'');
}

[Steve100]

Brilliant, thanks for this - it works great in IE, FF and Safari


Steven

[stereofrog]

It might be interesting for you to see what this would look like with Prototype framework:

$$('ul.list-links').each(function(e) {
	e.immediateDescendants().last().addClassName("no-underline");
})

Looks a bit simpler, IMO

[brothercake]

Simpler yes, if you don't mind a glut of external dependency just to perform a simple task

[stereofrog]

My point was to show OP that his wheel is already invented.

[brothercake]

Assuming that all he wanted was a functional wheel - maybe he'd like to learn how to make wheels himself, and who knows, maybe make a better wheel