Cool jQuery selector, bro

[masonwheeler]

My brother just emailed me this. Found in the codebase he's working on:

$('.actionType input').click(function() {
    var actionName = $(this).parent().find('input').val();
    ...
}

[Arantor]

@masonwheeler wut, I don't even, TDEMSYR.

Looks like the code someone I know might write, too.

[coderpatsy]

The only way I see that making sense is if the parent contains more than one input and they want the value of the first.

Oh wait that still doesn't make sense in the context of the event.

Also why use jQuery to get the value when this is perfectly doable in native javascript via querySelector or even getElementsByTagName.

[Lorne Kates]

@masonwheeler said in Cool jQuery selector, bro:

My brother just emailed me this. Found in the codebase he's working on:

$('.actionType input').click(function() {
    var actionName = $(this).parent().find('input').val();
    ...
}

At some point, there was a hidden field next to that input that had a value someone wanted. The coder didn't know about sibling, so they did what you pasted. (Except "input" was the hidden field).

The hidden field got refactored out, because it's dumb.

Another developer just left this there, and someone else copypasta'd without thinking.

[anotherusername]

@coderpatsy said in Cool jQuery selector, bro:

why use jQuery to get the value when this is perfectly doable in native javascript

Everything in jQuery is perfectly doable in native Javascript, because that's what jQuery is written in.

[LB_]

@Lorne-Kates said in Cool jQuery selector, bro:

The hidden field got refactored out, because it's dumb.

What if it was a CSRF token?

[Lorne Kates]

@anotherusername said in Cool jQuery selector, bro:

@coderpatsy said in Cool jQuery selector, bro:

why use jQuery to get the value when this is perfectly doable in native javascript

Everything in jQuery is perfectly doable in native Javascript, because that's what jQuery is written in.

jQuery just lets you write in one line what would take twenty lines in plain JavaScript (and still not be cross-browser compatible).

[anotherusername]

@Lorne-Kates sometimes. Not always.

What @coderpatsy actually meant was that the plain Javascript, in this case, wouldn't have been substantially longer or more complicated than the jQuery.

[coderpatsy]

@Lorne-Kates said in Cool jQuery selector, bro:

jQuery just lets you write in one line what would take twenty lines in plain JavaScript (and still not be cross-browser compatible).

Depends. Vanilla.js has gotten a lot better at cross-browser stuff. That's not to say jQuery doesn't have its conveniences and shims (it will be a joyous day when IE is forever dead), just sometimes you don't have to use it everywhere.

But then again my perspective's screwed by only doing personal projects so I don't have deadlines and bosses looming over me.

[bb36e]

@coderpatsy IE will never die. It may come back under a different name like edge, or safari, or even Firefox, but the essence of ie8 will live on as long as there are multiple browsers

[dkf]

@coderpatsy said in Cool jQuery selector, bro:

Depends. Vanilla.js has gotten a lot better at cross-browser stuff. That's not to say jQuery doesn't have its conveniences and shims (it will be a joyous day when IE is forever dead), just sometimes you don't have to use it everywhere.

Also, there are things that you shouldn't use it for. In particular, browsers do XML fine but jQuery definitely does not. Or to be more accurate, it only does XML DOM Level 1, and that's missing a lot of key stuff. Save yourself a ton of time and do your XML stuff directly; it's still easy, and has fewer pitfalls.

[Lorne Kates]

@anotherusername said in Cool jQuery selector, bro:

@Lorne-Kates sometimes. Not always.

Just mostly always.

@anotherusername said in Cool jQuery selector, bro:

What @coderpatsy actually meant was that the plain Javascript, in this case, wouldn't have been substantially longer or more complicated than the jQuery.

Even in those few cases, if you're using jQuery for everything else anyways, you might as well jQuery the "simple" select, too. It's easier to maintain and support in the long run, if you don't have to brain-switch between jquery and plain old javascript.

Now, if you were ONLY doing that one simple query, there's no need for the entire jQuery library. I suspect this is not the case.

(though I will still be pounds to poundcake that most devs will use getElementsByTagName, and forget to do a null or empty check, and cause an exception)

[Onyx]

@coderpatsy said in Cool jQuery selector, bro:

Also why use jQuery to get the value when this is perfectly doable in native javascript via querySelector or even getElementsByTagName.

Why do any of that when, within context, the element that's being selected is referenced by this anyway?

[coderpatsy]

@Onyx I was running with the idea of "get the value of the first input child of the target element's parent," assuming that the child may not be the target. It's very likely this.value or this.previousElementSibling.value is what they're going for though.

@Lorne-Kates Totally agree about the check. In this case it'd be unnecessary though since the code couldn't possibly run without an input element to click.

[Onyx]

@coderpatsy said in Cool jQuery selector, bro:

@Onyx I was running with the idea of "get the value of the first input child of the target element's parent," assuming that the child may not be the target.

I was going to say that would fail since .find() would find more than one element, but it seems that it actually will operate on the first element of the set regardless of the set length. Huh. TIL.

Though I'd rather have it error out TBQH, even if it's a single element that's returned. Joys of JS and jQuery I guess.

[sloosecannon]

@Onyx said in Cool jQuery selector, bro:

@coderpatsy said in Cool jQuery selector, bro:

Also why use jQuery to get the value when this is perfectly doable in native javascript via querySelector or even getElementsByTagName.

Why do any of that when, within context, the element that's being selected is referenced by this anyway?

Yeah. That's definitely TRWTF.

Well, that or the fact that they use this in the freaking listener!!!!!!!

[Jaloopa]

@Onyx said in Cool jQuery selector, bro:

Why do any of that when, within context, the element that's being selected is referenced by this anyway?

Because nobody using Javascript is ever entirely sure what this refers to in any given context?

[lucas1]

@Lorne-Kates Some stuff yes. My major gripe with writing jQuery free code is that you gotta always shim bits and pieces in or you code isn't very DRY.

[lucas1]

@bb36e It depends if you need CSS3 selectors in document.QuerySelectorAll().

[lucas1]

@Jaloopa You can use bind() to overcome that.

[dkf]

@lucas1 said in Cool jQuery selector, bro:

@Jaloopa You can use bind() to overcome that.

And pray that nothing else decides to bind() “helpfully” too.

[lucas1]

@dkf except it can't.

Function.prototype.bind() - JavaScript | MDN

The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

[dkf]

@lucas1 said in Cool jQuery selector, bro:

except it can't

And then it will break because it can't and the maintenance programmer trying to figure out WTF is going on will have no idea. Look, there's some truly shit code out there.

OTOH, my problems with jQuery (well, jQuery UI really) in practice are to do with it having this unhealthy attachment to computing exact sizes for things, especially at times when that calculation is bound to be grossly wrong. I guess I could !important a whole bunch of overrides in my CSS, but that's just so annoyingly stupid and makes everything seem really dirty.

[sloosecannon]

@dkf said in Cool jQuery selector, bro:

jQuery UI

Blech.

Yeah jQuery UI is crap.

jQuery, on the other hand, is very nice.

[Lorne Kates]

@Onyx said in Cool jQuery selector, bro:

@coderpatsy said in Cool jQuery selector, bro:

Also why use jQuery to get the value when this is perfectly doable in native javascript via querySelector or even getElementsByTagName.

Why do any of that when, within context, the element that's being selected is referenced by this anyway?

:thats_my_fucking_point.qt:

[Lorne Kates]

@sloosecannon said in Cool jQuery selector, bro:

@dkf said in Cool jQuery selector, bro:

jQuery UI

Blech.

Yeah jQuery UI is crap.

jQuery, on the other hand, is very nice.

I kinda like jQuery UI. The animations are handy, and you get access to Themeroller. More than once I've pointed a PHB or Market Droid at Theme Roller and said "looks, colors, ooooo".

[Onyx]

@Lorne-Kates said in Cool jQuery selector, bro:

qt

Aww, stop it, I'm blushing!

[dkf]

@Lorne-Kates said in Cool jQuery selector, bro:

I kinda like jQuery UI.

It mostly works, provided you don't ever change the width of the browser. Or use their dialogs. Their own widgets don't work with their dialogs because who would want to use their things together?! I'm just sooo used to Doing It Wrong, it seems…

[lucas1]

@dkf to be fair jQuery UI was created in the age where everything was pretty much fixed width.

[boomzilla]

@bb36e said in Cool jQuery selector, bro:

but the essence of ie86 will live on as long as there are multiple browsers

[anotherusername]

Am I literally the only person in this thread sitting here going "wait, jQuery has a UI?"

[LB_]

@anotherusername I also thought it was just a JavaScript library like any other.

[dkf]

@LB_ jQuery UI is a separate library to jQuery…

[FrostCat]

@anotherusername said in Cool jQuery selector, bro:

Am I literally the only person in this thread sitting here going "wait, jQuery has a UI?"

You know it's bad when I've heard of a crappy JS library others haven't.

[Lorne Kates]

@dkf said in Cool jQuery selector, bro:

@Lorne-Kates said in Cool jQuery selector, bro:

I kinda like jQuery UI.

It mostly works, provided you don't ever change the width of the browser. Or use their dialogs. Their own widgets don't work with their dialogs because who would want to use their things together?! I'm just sooo used to Doing It Wrong, it seems…

I'll caveat: I kinda like SOME parts of jQuery UI. Off the top of my head:

• The "state" flags-- active, hover, default, etc. Especially combined with themeroller, so it disambigusousates "highlighted" from "yellow"
• The icon set. I guess Fuck Awesome or something does that too. But for the longest time, it was the only themeable icon set I could get my hands on
• The fadeIn / Out and other transition effects.
• The drag/drop library
• The calendar control

The last one mainly because it replaces the Ajax Toolkit calendar, aka: the fucking worst thing ever made.

[ben_lubar]

@Lorne-Kates said in Cool jQuery selector, bro:

• The "state" flags-- active, hover, default, etc. Especially combined with themeroller, so it disambigusousates "highlighted" from "yellow"

Already part of CSS.

@Lorne-Kates said in Cool jQuery selector, bro:

• The icon set. I guess Fuck Awesome or something does that too. But for the longest time, it was the only themeable icon set I could get my hands on

Already part of Unicode.

@Lorne-Kates said in Cool jQuery selector, bro:

• The fadeIn / Out and other transition effects.

Already part of CSS.

@Lorne-Kates said in Cool jQuery selector, bro:

• The drag/drop library

Already part of HTML5 DOM.

@Lorne-Kates said in Cool jQuery selector, bro:

• The calendar control

Already part of HTML5.

[sloosecannon]

@ben_lubar He's probably using it for the same reason a lot of people (self included) use jQuery though - it's what he knows and it's easier to use that than to learn a completely different way to use the same thing.

Personally, I stay clear of jQuery UI because I just don't really like it. But I can see why people would use it, especially if you already know it.

[dkf]

@sloosecannon said in Cool jQuery selector, bro:

it's easier to use that than to learn a completely different way to use the same thing

Exactly, and it's got a wide range of useful third-party add-ons too. I ought to learn something else though, something less annoying.

[djls45]

@dkf said in Cool jQuery selector, bro:

@sloosecannon said in Cool jQuery selector, bro:

it's easier to use that than to learn a completely different way to use the same thing

Exactly, and it's got a wide range of useful third-party add-ons too. I ought to learn something else though, something less annoying.

Sounds like @ben_lubar has already suggested a direction -> HTML5/CSS.