如何将jQuery本机/本地范围公开给变量以扩展对象方法

Question

Alright maybe this question has been answered before but I don't even really know how to ask it. All I can tell you what I'm trying to do.

I create an array of document objects with jQuery selector function and assign it to a variable like so:

    var imgArray = $("#rootContainer > img");

now when i iterate over the array all of the jQuery methods are gone. For instance this doesn't work.

   for (i = 0; i < imgArray.length; i++) {
       var scaledWidth = (imgArray[i].width * 0.5); 
       imgArray[i].width(scaledWidth);
    } 

error something like width is not a function... which it's not in the standard DOM but if jQuery scope was passed to the variable it would be. I can get the code to work in pure javascript but then whats the point of abstracting away the DOM if you can't pass scope?

Answer 1

i know three ways to get needed element from array $(selector)[index] , $(selector).get(index) , $(selector).eq(index) ...and u can use foreach

$.foreach(imgArray,function (index, img){
     scaledWidth = (img.width() * 0.5); 
     img.width(scaledWidth);
});


for (i = 0; i < imgArray.length; i++) {
   var img = $(imgArray)[i],
       scaledWidth = (img.width() * 0.5); 
   img.width(scaledWidth);
}

Answer 2

When you have a jQuery instance, you can call jQuery methods. When you have a single DOM node, you can use the native DOM API, and call DOM methods and set DOM properties, but you cannot use jQuery methods on regular DOM elements.

Here you will find more detailed information:

http://james.padolsey.com/stuff/jQueryBookThing/#dom-then-jquery