With (or similar) statement in JQuery

Question

Very simple question: I want to optimize the following jQuery code with maximum readability, optimal performance and minimum fuss (fuss = declaring new variables etc):

$(".addthis_toolbox").append('<a class="addthis_button_delicious"></a>');
$(".addthis_toolbox").append('<a class="addthis_button_facebook"></a>');
$(".addthis_toolbox").append('<a class="addthis_button_google"></a>');
$(".addthis_toolbox").append('<a class="addthis_button_reddit"></a>');
.
.
.
$(".addthis_toolbox").append('<a class="addthis_button_yetanotherservice"></a>');

score 6 · Answer 1 · answered Jun 18 '10 at 14:22

6

You can just keep chaining on the same jQuery object, like this:

$(".addthis_toolbox").append('<a class="addthis_button_delicious"></a>')
                     .append('<a class="addthis_button_facebook"></a>')
                     .append('<a class="addthis_button_google"></a>')
                     .append('<a class="addthis_button_reddit"></a>');

answered Jun 18 '10 at 14:22

Nick Craver

623,446
136
1,297
1,155

Even better: just append a single string containing all those elements. – Andy E Jun 18 '10 at 14:29
1

@Andy - Agreed *for this example*, but might be something else at play here. A single string for the anchors would be a cached document fragment giving a decent performance boost here if there were a lot of `.addthis_toolbox` elements, but wasn't sure what the "..." part of the question was :) – Nick Craver Jun 18 '10 at 14:31
@Andy: yes, that's the best possible way performance-wise but it'll decrease readability. – Salman A Jun 18 '10 at 14:45
2

@Salman - Strings can be `"string part 1"` + (newline) + `"string part 2"`...not sure how it'd decrease readability any. Readability is relative though, there are reasons *not* to use `with`, you can see both sides here: http://stackoverflow.com/questions/61552/are-there-legitimate-uses-for-javascripts-with-statement – Nick Craver Jun 18 '10 at 14:49

score 0 · Accepted Answer · answered Jun 18 '10 at 14:21

0

JavaScript does have the with statement:

with($(".addthis_toolbox"))
{
    append('<a class="addthis_button_delicious"></a>');
    ...
}

You might run into some confusing issues regarding variable scope using the with statement though.

You could use chaining to achieve the same thing:

$(".addthis_toolbox").append('<a class="addthis_button_delicious"></a>')
                     .append(...)
                     .append(...);

answered Jun 18 '10 at 14:21

Justin Niessner

242,243
40
408
536

1

I didn't downvote, but the Javascript community is virtually unanimous in condemning the `with` statement as an extremely bad idea. It is **not** an "optimization" since it generally results in poor performance. It can also cause memory leaks. Really, it's not a good idea. – Pointy Jun 18 '10 at 14:52
1

@Pointy - *Most* things taken *from* VB were misguided :), oh yeah I said it. – Nick Craver Jun 18 '10 at 14:56
@Nick Craver - I'm with you on that one. – Justin Niessner Jun 18 '10 at 14:59
@Justin - Not my vote either (see my profile, I *very* rarely do that)...it is a valid solution, but I do agree with @Pointy's statement here, `with` is generally a bad idea, for readability *and* performance. – Nick Craver Jun 18 '10 at 15:17
@Nick Pascal had "with"; I'm pretty sure the idea predates VB by a couple decades! – Pointy Jun 18 '10 at 15:36
@Pointy - Yeah...but it's tainted now, guilty by association :) I feel dirty when I write "End If" in oracle even ;) – Nick Craver Jun 18 '10 at 15:51

With (or similar) statement in JQuery

2 Answers2