Adjacent Sibling Selectors with jQuery

As I may or may not have told you, I love jQuery for its simple syntax. Not that is suitable to replace common (heavy) tasks as striping big tables, because of the speed difference. I mean, dom scripting is still way faster than (to my knowledge) any library.
But it's simple syntax makes it suitable to let non javascript people use it.
As I am leaving a project half way, I have a lot of loose ends. But jQeury lets me leave people with some good building blocks to finish the work.
In this project I employ all the possibilities of css, including Adjacent Sibling Selectors even though they don't work in IE.
Here is where jQuery comes to the rescue, with one simple line of code we make IE behave

$("#a + b").addClass("foo");

This is where jQuery shines, it let's people just do stuff.However, it is still a bit scary, putting guns in the hands of children. See this article by Peter-Paul Koch, where he collects and reviews quite a few good opinions.

Test script

At this moment, I am working on a new release of a library of html, css and javascript components for a client. The new release mostly consist of new (faster) javascript. This results in slightly different css classes I need to adress.

In helping me define which classes are set on a html element, I wrote this small test script to give me the value of (among others) the className.

(yes, I know the web developer toolbar for firefox by Chris Pedrick but I need to see stuff in IE 6 and below.)

So this is what I wrote, I hope someone else will find it usefull.

function testScript(){
// get all the elements on the page
var test = document.getElementsByTagName("*");
// build a nodelist
for (var i=0;i<length;i++){
// do something on click
test[i].onclick = function (){
// throw an alert with the tagname, classname and value
alert(" tagName = " + this.tagName + "className = " + this.className + " value = " + this.value);
// stop the bubbling, see quirksmode for explanation
// http://www.quirksmode.org/js/events_order.html#link9
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
}
}

Drop in to your project and see the value's defined in the alert when you click on something. It also stops bubbling, so you won't be annoyed by the script traveling all the way up through the dom tree.

Have fun using it and let me know if you use it or (better) improved it...

UPDATE 30-11-2006

Finally gotten around to installing the IE developer toolbar and allthough it doesn't match the one for Firefox. It does the job better than my (crappy) javascript solution. So go here and download it...

UPDATE 26-1-2007

Try out my new (jQuery) version