The other suggestions are good starting points. One comment though...
doing $("div.box") needs to examine EVERY div on your page to see if it
has the .box class. If you can constrain that search some that could
help improve performance. For instance, if you only care about the
div's in a particular area you might do $("div.box", "#myarea") - and
exclude all div's outside that area.
The other suggestions touch on this, but doing the $("div.box:eq(...)")
inside your loop is forcing yet another search of all the divs with the
.box class. You can replace that entire bit (and the count variable)
with "this). $(this).append(". . ."); Within an EACH loop, "this" is a
reference to the currently matched element.
So the routine becomes
$("div.box").each(function () {
$(this).append(
"<div class=\"summary\"><p class=\"sml\"> +
$("dd p", this).html() +
"</p></div>");
});
//(the $(this).append() line is really one line - split for readablity)
One rule of thumb I've learned - where ever possible, use a unique ID.
Doing a selector based on ID is SOOOO much faster than a class based
selector. Of course this isn't always possible though...
HTH
Shawn
Raymond wrote:
> I was wondering if anyone knows of a less processor intensive way of
> doing the following code?
>
> I am trying to loop over all classes of a certain type on the page and
> then append some html that is contained within that particular class.
> What it is doing to the user is collapsing the search results into a
> "summary" of each as the length of the original result set can be long
> to scroll through.
>
> var count = 0;
> $('div.box').each(function()
> {
> $('div.box:eq(' + count + ')').append('<div
> class="summary"><p
> class="sml">' + $('div.box:eq(' + count + ') dd p').html() + '</p></
> div>');
> count = count + 1;
> });
