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: <img>, 1: <img>, 2: <img>, length: 3, prevObject: Object, context: HTMLDocument → JSUmstellung, selector: "#newsdesk>ul>li>a>img" }

I want to change eachs CSS-Property, so I made this:

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

When I run this code, I just get the following error:

TypeError: element.css is not a function

What am I doing wrong? Do I have to access my element in another way?

Thanks in advance!

For what it's worth, if you're not going to use index or element, you don't have to include them: elements.each(function() {. Then use $(this) in the function. — jwatts1980
– jwatts1980, Commented Aug 5, 2014 at 14:23

David Thomas · Accepted Answer · 2014-08-05 14:25:27Z

19

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.

edited Aug 5, 2014 at 14:25

answered Aug 5, 2014 at 14:19

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ovmcit5eoivc4 Over a year ago

Ahh! Thanks, I thought jQuery did that automatically.. :D

jwatts1980 Over a year ago

A jQuery object is just a wrapping around the underlying DOM element. That wrapper comes with some overhead, though. To support the effort of being as fast as possible, jQuery rarely (never?) automatically wraps a DOM object. So the base DOM objects are the context (this) and what get passed in (element).

jwatts1980 Over a year ago

Re: advantage of using element - maybe if instead of using an anonymous function, you're calling an existing function that's in a different context. So using this in that context would not represent the DOM element.

recoup8063 · Accepted Answer · 2014-08-05 14:20:37Z

1

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)

answered Aug 5, 2014 at 14:20

recoup8063

4,2906 gold badges39 silver badges61 bronze badges

Comments

raffi · Accepted Answer · 2014-08-05 14:24:38Z

0

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
    });
}

answered Aug 5, 2014 at 14:24

raffi

1391 silver badge9 bronze badges

Collectives™ on Stack Overflow

jQuery .each css is not a function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related