It’s the Little Things

When I came to work here, I was using the Prototype/Scriptaculous one two punch. Several of my peers were talking about jQuery, and how great it is. I had, however, already found my JS framework, though, and stuck with Prototype.

Over time, I grew tired of working around jQuery. I started figuring out how it worked, and about that time I re-realized how great life is for people who make web sites. We have jQuery, we have Firebug, we have CSSEdit, Textmate. Life is good.

Since I sat down and figured out how jQuery works I haven’t given Prototype even a sideways glance. I don’t know what state the effects are in. No clue about the footprint. jQuery has completely won me over, and here is why:

I recently had a little problem where I needed show some form fields dependent on the state of a checkbox. If the checkbox is clicked, show the hidden ( .dependent{ display: none } ) fields:

$('input[type=checkbox]').click(function(){ $(this).parent().find('div.dependent').show(); });

There was a side effect here of prematurely showing nested checkboxes

Okay well, what about the child selector? You know, the one where you put “body > p” which selects paragraphs that are direct children of the body tag. Seems like a good choice, right. But then I’m looking at my jQuery, and because I’m passing the clicked input, and getting its parent: $(this).parent().find(‘div.dependent’), it looks like the only place that even sort of seems like it will work is to just put it in front of the div. So I tried that.

$('input[type=checkbox]').click(function(){ $(this).parent().find('> div.dependent').show(); });

Ta-da. This whole big long story, 2 code snippets, 3 images so I can illustrate the kinds of things that make me happy to be making websites. I hope the dev team gets some use out of this code. Thank-you jQuery.

P.S. While this isn’t my exact production code, its similar, so if you have an approach that is much cleverer than this, I’ve left comments on.

posted by Pete Lasko on Tuesday, Sep 16, 2008