Home/ Questions/Q 3997152
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:22:01+00:00

JQuery Version jQuery JavaScript Library v1.4.4 Problem The solution may be blatantly obvious, however

  • 0

JQuery Version

jQuery JavaScript Library v1.4.4

Problem

The solution may be blatantly obvious, however I’m scratching my head.

The problem is while doing some code optimisation I came across a loop that called append on a jquery element a few times and it was a rather large loop. So it looked something like this:

var list_of_goodies = [1,2,3,...];
$.each(list_of_goodies, function(val) {
      $('div.toaddto').append(val);
      ...some more code...
      $('div.toaddto').append(otherval);
});

As you can see not really optimised so I tried to use function pointers so it looked something like this:

var list_of_goodies = [1,2,3,...];
var toaddtoAppend = $('div.toaddto').append;
$.each(list_of_goodies, function(val) {
      ... the other code...
      toaddtoAppend(val).append(otherval);
});

It may not seem like a huge optimisation, but it’s a large list and this can save a lot of lookup time especially in the older IE’s.
This however causes an error.

The Error

this.domManip is not a function

Unfortunately this is from the minified jQuery, so there isn’t much more info, it seems to happen within wrapInner() however.

Question

Is this a scope issue or a reference issue? I’ve tested it without using jQuery and the function pointer worked.

$.each or a for loop end up with the same results. Anyone know where I’m going wrong here?
I know very little about how javascript handles function pointers, especially when they’re supposed to be associated to an instance of something as opposed to just static, so forgive any ignorance here.

Browsers Tested In

  • Firefox 3.6
  • IE 6, 7 & 8
  • Chrome 9.0.something

Regardless of the browser the results are always the same, which seems to suggest it’s not how the browser is handling the pointer that’s causing it to break.

Test it Yourself

<html>
   <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
     <script type="text/javascript">   
         $(function(){
            var iterables = [];
            for (var i = 0; i < 1000; i++) iterables.push(i);
            var divAppend = $('#test').append;
            $.each(iterables, function(val) {
               divAppend(val);               
            });
         });       
      </script>
   </head>
   <body>
      <div id="test"></div>
   </body>
</html>

Thanks,
dennmat

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you write var divAppend = $('#test').append, you’re storing a reference to jQuery’s standard append function.
    It’s equivalent to writing var divAppend = $.fn.append—$('#test') isn’t stored anywhere.

    When you call divAppend as a normal function, its this is window, not a jQuery object.

    You need to store a function that explicitly calls $('#test').append(...), or use divAppend.call($('#test'), val) to explicitly call append on the right object.

    • 0