Javascript function to 'get element by parent class' and assign

Question

My predicament is fairly simple: this function gets the id of 'this' <li> element based on parent id of <ul>. It used to work fine but not any more, I will either need to have <ul> use classes instead of id while still being able to assign id of 'current' to the current element, or change my css

function myFunction(element){
  liArray = document.getElementById("leftlist").childNodes;
  i=0;
  while(liArray[i]){
    liArray[i].id="";
    i++;
  }
  element.id="current";  // or element.className  ?
} 

/**** css *********/
ul#leftlist {background-color: rgb(205,205,205);}
ul#leftlist li#current  a{color: rgb(96,176,255);  background-color:218,218,218);}
ul#leftlist li a{ color: rgb(86,86,86);}
#leftlist a:link{color: rgb(86,86,86);background-color: #ddd;}
#leftlist a:active{color: rgb(96,176,255); background-color: rgb(218,218,218); }

/****** html *********/
<ul id="leftlist">
  <li onClick='myFunction(this);'><a href="123" bla bla </a></li>
  <li onClick='myFunction(this);'> .... etc.</li>
</ul>

Perhaps i need to change my css, this worked before but now the current id is not being effective as ul#leftlist li a takes priority even when i assign id="current" via javascript.

Answer 1

I'd suggest you using the jQuery framework. It will provide a nice abstraction over your DOM and make it way easier for you to find objects in your DOM and assign events to those objects.

Try reading this tutorial over at jQuery.com. I am sure it will amaze you :)

Answer 2

You should use classes for things like "current", not the id. The id normally shouldn't change, and "current" isn't a very good id, as you could have a bunch of things on a page that is "current" in some way. If you need some css style to override another, you can force it with !important:

ul#leftlist li.current a {
  color: rgb(96,176,255) !important;
  background-color:218,218,218) !important;
}

Answer 3

It looks like you do need to change one line in your css:

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color:218,218,218);}

It's missing the rgb( after background-color and should look like:

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color: rgb(218,218,218);}

I'd also agree with Erlend, current would be better suited to a class.

Answer 4

The function changes to:

function myFunction(element){
  var liArray = document.getElementById("leftlist").childNodes;
  var i=0, item;
  while (item = liArray[i++]) {
    if (item.nodeType === 1) {
      item.className = item.className.replace(/(^| )current( |$)/g, '');
    }
  }
  element.className += " current";
}

The CSS needs a change to class as well:

ul#leftlist li.current a { ... }

Answer 5

Do you do your change in a way, so that you end up with more than one element having the same id ?-)

That is clearly against the whole idea, using id's they have to be totally unique within the context of the html-document ...

-- the first thing, you ought to do is to be sure you only address your li-elements:

liArray=element.parentNode.getElementsByTagName("li");

Secondly it could be an idea, to ensure higher priority for one of your selectors by setting something more in the selector:

Highest priority is gained, if you use an inline style-attribute on the tag, but this doesn't seem to be of any use here.

IDs give a high priority, class give a fair priority and element- and pseudo-selectors give a low priority ...

However each type of priority is accumulated and in that way you can give one selector very high priority by preceding it with another of same priority-type:

ul#leftlist gives 1 point in high priority and 1 point in low priority

#myParent ul#leftlist gives 2 points in high priority and 1 in low

.myParent ul#leftlist gives 1 points in high priority, 1 point in fair priority and 1 point in low priority

Thus you can differentiate the priority for your selectors in the stylesheet !-)