Another .js (jquery) question.

[TechBoyJK]

I'm trying to use a variable in place of a selector.

Here's the code without the variable

$('.registerForm #firstName').on('focusout', function() {

I want to swap out .registerForm for a var called thisForm

and set thisForm = .registerForm

I tried several variations of what's below, but it's not doing anything. When I call the page with the code and check the source, it's not interpreting it. It's just producing the exact code I used.

$(+thisForm + '#firstName').on('focusout', function() {


Thoughts?

 

[purbeast0]

$(thisForm + ' #firstName') should work.

you don't need the + infront of it, and you also need a space before #firstName in the string, otherwise you are trying to do $('.registerForm#firstName') which would be an object with id firstName and class registerForm, not an object with id firstName down inside an object with class registerForm.

i think something like $(thisForm).find('#firstName') would also work.

 

[TechBoyJK]

I think you had left out a '

But you were right.

This is what worked

$(formName+' #firstName').on('focusout', function() {

 

[purbeast0]

yeah i left out the closing ', i just fixed it above just for future reference heh.

 

[Ken g6]

Technical issue: IDs are supposed to be unique throughout a page. So #firstName should be sufficient on a proper page.

 

[TechBoyJK]

Technical issue: IDs are supposed to be unique throughout a page. So #firstName should be sufficient on a proper page.

The issue is I may have instances where a user, via jQuery, ends up having multiple forms loaded into the dom, but they aren't visible. The forms could potentially have the same ID's due to formatting.

 

[purbeast0]

The issue is I may have instances where a user, via jQuery, ends up having multiple forms loaded into the dom, but they aren't visible. The forms could potentially have the same ID's due to formatting.

and his point is, that is very bad design. if you have multiple items with the same id, it won't return all of them - it will just return 1 of them. so your code still won't work as you want it to.

demo - http://jsfiddle.net/dzXKs/1/

just use classes.

 

[TechBoyJK]

and his point is, that is very bad design. if you have multiple items with the same id, it won't return all of them - it will just return 1 of them. so your code still won't work as you want it to.

demo - http://jsfiddle.net/dzXKs/1/

just use classes.

Done.

Revisted the reason why I was using ID's anyway. At this point, didn't even apply anymore.

Also, to my understanding, in regards to CSS/browser rendering, is that classes are faster as well because ID's require more seeking? It's been a month or so since I read an article about it.

 

[purbeast0]

Done.

Revisted the reason why I was using ID's anyway. At this point, didn't even apply anymore.

Also, to my understanding, in regards to CSS/browser rendering, is that classes are faster as well because ID's require more seeking? It's been a month or so since I read an article about it.

not sure about that, and to be honest, it doesn't really make sense. my understanding is that once it finds the id specified, it stops traversing the dom since it found the id. with classes, it would have to traverse the whole dom because it would have to look for them everywhere.

but again, i'm not really sure and have never been concerned with that stuff because modern browsers are fast enough that i don't think it matters much. i've never ran into performance issues due to this stuff though. however, creating nice css is also an art where everything cascades perfectly.

also, with regards to css, stay away from !important as well. if you are using them all over the place, it just means your writing bad css.

 

[Occ]

Modern browsers are nice and fast, but can still be brought to their knees if you try, and if you have to support something older like IE8 for enterprise you definitely have to pay attention.

From what I've read, getting Ids is faster because the function for that in the browser is usually pretty good, and the id is supposed to be unique on the page, whereas potentially any element could have the class.

One way to optimize class selectors is to do things like $('div.div-class') instead of just $('.div-class'), so instead of looking in all elements, you're just looking at div elements.

 

[TechBoyJK]

Modern browsers are nice and fast, but can still be brought to their knees if you try, and if you have to support something older like IE8 for enterprise you definitely have to pay attention.

From what I've read, getting Ids is faster because the function for that in the browser is usually pretty good, and the id is supposed to be unique on the page, whereas potentially any element could have the class.

One way to optimize class selectors is to do things like $('div.div-class') instead of just $('.div-class'), so instead of looking in all elements, you're just looking at div elements.

so if you prefix the selector with the object type, it filters the search based on that object type? hmmm didn't know what.

 

[purbeast0]

so if you prefix the selector with the object type, it filters the search based on that object type? hmmm didn't know what.

you can go very deep too...

$(div.parent ul.subobject li.child a.lowest) and so on and so on.

there are a lot of options you can put in selectors too, like get the nth div or object inside of another, or ones that have specific attributes. the jquery selector is very powerful.

 

[GregGreen]

One way to optimize class selectors is to do things like $('div.div-class') instead of just $('.div-class'), so instead of looking in all elements, you're just looking at div elements.

Quick response -- shorter selectors are almost always faster.

Longer response -- there are two things wrong with this idea:

1. On browsers > IE8, '.div-class' would use getElementsByClassName under the hood and 'div.div-class' would use querySelectorAll. getElementsByClassName is significantly faster querySelectorAll.
2. On older browsers, jQuery/Sizzle/the browser's CSS parser read the selector from right to left so it first looks up 'div-class' using getElementsByClassName then filters out the divs using getElementsByTagName on the result getElementsByClassName returned.

 

[xantub]

basically, if you use #whatever, you don't need any more selectors, it's the fastest way to find anything. Also, you should not under any circumstances have more than one element with the same ID in the page (unless they're in an iframe, which technically is another page) they are meant to be unique.

 

[Occ]

Quick response -- shorter selectors are almost always faster.

Longer response -- there are two things wrong with this idea:

1. On browsers > IE8, '.div-class' would use getElementsByClassName under the hood and 'div.div-class' would use querySelectorAll. getElementsByClassName is significantly faster querySelectorAll.
2. On older browsers, jQuery/Sizzle/the browser's CSS parser read the selector from right to left so it first looks up 'div-class' using getElementsByClassName then filters out the divs using getElementsByTagName on the result getElementsByClassName returned.

Yes, you are correct; any modern browser like Chrome or Firefox, and I assume the new IE, have very fast getElementsByClassName methods, so that seems to usually be fastest. However, IE8 does not have the getElementsByClassName function, so I'm not sure point #2 is correct for that scenario.

I quickly ran an IE8 and Firefox comparison on the following test I googled: http://jsperf.com/selectors-perf/3

And found that in IE8, using element.classname scores 23000 vs 20000 with just .classname. However, Firefox 24 scores 43000 using element.classname and 67000 using just .classname. So... having to support IE8 is awful. :'(

It would be nice if the jquery team updated their selector optimization page, because it seems to imply that element.classname is faster.
http://learn.jquery.com/performance/optimize-selectors/