Improve my jQuery code!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Improve my jQuery code!

Post 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.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Improve my jQuery code!

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: Improve my jQuery code!

Post by onion2k »

That works, cheers. I didn't realise you could do $(this). That's handy.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Improve my jQuery code!

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Improve my jQuery code!

Post 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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Improve my jQuery code!

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: Improve my jQuery code!

Post by onion2k »

The final code won't be inserting anything anyway, it'll be updating styles. So it doesn't matter.
Post Reply