Parents, Closest, and Find

While working with form checking in jquery, I ran into some real confusion between the many options for traversing the DOM.  It’s awesome to have so many options, but it was tough to find the right one for my checks.  I thought for sure that sibling would do it- I wanted to check a form field and if it passed my function, to fade in a span placed just before that field (and alongside the title of the field).

Wouldn’t work.  Then, I thought maybe parent, though I knew deep down that wouldn’t be it- the form is within a table layout (I know, I know), and the parent would be the td element.  Eventually (thanks Stack Overflow), got to the combination of closest and find.  By walking up to get the ‘closest’ td element, then back down to ‘find’ the nearest instance of the class I wanted to fade in, I finally got it to work.

Gives a new appreciation for how hard this kind of stuff was back when vanilla JS was all that was available.  Maybe it’s not cool anymore with the framework wars going on, but jquery really is the shit.

$('#name').bind('keyup blur', function() {
$(this).closest('td').find('.fa-success').fadeIn(500);
}

Yes- that is the font-awesome library I’m using for icon fonts- good eye! Just found it and that’s some cool stuff.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s