Page 1 of 1
Improve my jQuery code!
Posted: Mon Apr 27, 2009 7:44 am
by onion2k
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
This works:
Code: Select all
$(document).ready(function() {
$(".box").each(function(i){
var d = $("#"+this.id);
var d_offset = d.offset();
d.html(this.id + " " + d_offset.top + " x " + d_offset.left);
});
});
But it fails if an element doesn't have an "id" attribute. How do you access an element using each() but without using the id? I need to get the position of all the elements on a page that have the "box" class.
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
Re: Improve my jQuery code!
Posted: Mon Apr 27, 2009 8:00 am
by Eran
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
The elements are already available inside the callback, no need to fetch them via an ID.
Code: Select all
$(document).ready(function() {
$(".box").each(function(i){
var offset = $(this).offset();
$(this).html($(this).attr('id') + " " + offset.top + " x " + offset.left);
});
});
Possibly you don't need the ID attribute at all
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
Re: Improve my jQuery code!
Posted: Mon Apr 27, 2009 9:13 am
by onion2k
That works, cheers. I didn't realise you could do $(this). That's handy.
Re: Improve my jQuery code!
Posted: Mon Apr 27, 2009 10:02 am
by pickle
I'd suggest using .text() rather than .html() if possible. .html() parses the string & attempts to insert it into the DOM - more overhead than necessary if you're just inserting plain text.
Re: Improve my jQuery code!
Posted: Mon Apr 27, 2009 11:31 am
by Eran
Hey pickle, thanks for editing our post... but it looks like we made some grave offense or something

Kind of an overkill don't you think? by the way, I've been posting here for a while and wasn't aware of a code=javascript attribute. Maybe this could be more obvious somehow.
As an aside, the html() method is a shortcut for the innerHTML property, which is usually faster than using DOM methods (which text() uses). Either way, unless it's for thousands of consecutive operations, it shouldn't make much of a difference.
http://www.quirksmode.org/dom/innerhtml.html
Re: Improve my jQuery code!
Posted: Mon Apr 27, 2009 12:22 pm
by pickle
What I did was standard Mod behaviour when code isn't formatted properly. It wasn't meant to single you out as an offender - we do it to everyone. I agree we could do more to explain how to properly post code. But at least now you know.
I wasn't aware of how .html() or .text() worked exactly - I just figured parsing a string for code tokens, and updating the DOM to have the new nodes must take longer than just adding/updating one text node.
Re: Improve my jQuery code!
Posted: Tue Apr 28, 2009 3:44 am
by onion2k
The final code won't be inserting anything anyway, it'll be updating styles. So it doesn't matter.