jQuery .each css is not a function

Question

I have an jQuery object with 3 members:

var elements = $(\"#\" + this.wrapperName + \">ul>li>a>img\");
Object { 0: , 1: , 2         


        

Answer 1

The problem is that element is a DOM node, without access to jQuery methods, what you need to use is $(this) or $(element):

elements.each(function(index, element) {
    $(this).css({
        "width": elemWidth,
        "height": elemHeight,
        "top": elemTop,
        "left": elemLeft
    });
}

Or:

elements.each(function(index, element) {
    $(element).css({
        "width": elemWidth,
        "height": elemHeight,
        "top": elemTop,
        "left": elemLeft
    });
}

Or you could, instead, use cssText (if you really want to work with DOM nodes):

elements.each(function(index, element) {
    element.style.cssText = 'width: ' + elemWidth + '; height: ' + elemHeight + ' top: ' + elemTop + '; left: ' + elemLeft;
}

Bear in mind that, within each(function (index, element){ ... }); element is exactly the same as this (and, as a corollary, $(this) is the same as $(element)). I'm not sure quite what the benefit is, of using the element at all.

Answer 2

You have to wrap it in the jquery format. Like so:

elements.each(function(index, element) {
    $(element).css({
        "width": elemWidth,
        "height": elemHeight,
        "top": elemTop,
        "left": elemLeft
    });
}

notice the:
$(element)

Answer 3

You have to use $(this) selector inside the each loop

elements.each(function(index, element) {
    $(this).css({
        "width": elemWidth,
        "height": elemHeight,
        "top": elemTop,
        "left": elemLeft
    });
}