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: :arrow: 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: :arrow: 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: :arrow: 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: :arrow: 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.