Wednesday, December 2, 2009

Re: [jQuery] error essage: "css is not a function"

The jQuery object - the return value from $(whatever) - is an array-like object with .length and [0] etc. properties. You don't need to call .get() on it unless you need an actual JavaScript Array object, which is rare.

The *elements* of the jQuery object - or the elements of the Array that .get() returns, are plain HTML elements - DOM nodes. They are not jQuery objects themselves. They have DOM methods and properties, not jQuery methods.

You can always wrap a DOM node in a jQuery object with $(theDomNode).

You can use a for loop just like the one you have, directly on a jQuery object without calling .get(). Or you can use jQuery's .each() method, which is often cleaner. One way to write your loop would be like this:

    $('.resizable').each( function( i, box ) {
        console.log( box.id + ': left=' + $(box).css('left') );
    });

In this code, 'box' is the same as 'boxes[i]' in your for loop. Note the difference between box.id - referencing a property of the DOM node directly - and $(box).css() - wrapping the DOM node inside another jQuery object and then calling a jQuery method on that object.

-Mike

On Wed, Dec 2, 2009 at 11:34 AM, hsfrey <hsfrey@gmail.com> wrote:
I'm using the following code:

               var boxes = $('.resizable').get();     // get divs as array
               for (var i=0; i<boxes.length; i++ )
               { console.log(boxes[i].id+': left='+boxes[i].css('left'));      }

I get this error message from Firebug:
              boxes[i].css is not a function
             [Break on this error]
            { safelog($boxes[i].id+': left='+$boxes[i].css('left'));\r
\n

I have used similar code before, but for an individual item, not an
array.
For instance, This works fine:

             var sel1=$('#'+b1);
             var c1x = parseInt(sel1.css('left'));

Does this simply not work on arrays, or have I made some other error?

No comments: