Question

I have a javascript class like this (i know it’s technically not a class).

function StackMedia (container) {

    this.container = container;
    this.items = container.find('.stackItem');
    console.log("this.items.length: "+this.items.length);

}

I pass a container (div) that holds other divs with the css class stackItem, those get stored in items.

Here i want to reuse it:

StackMedia.prototype.updatePositions = function() {

     for (var i = 0; i < this.items.length; i++) {
         this.items[i].css('left', 50);
    }
}

The problem is that it isn’t a jquery object anymore so i get this error:

TypeError: ‘undefined’ is not a function (evaluating ‘this.items[i].css(‘left’, 50)’)

How can i store them as a jquery object?

---

update

Here is where i create the classes (works fine):

// create a stack by passing a container
    $('.stackContainer').each(function(containerIndex) {
        $(this).css('z-index', containerIndex);
        stacks.push(new StackMedia($(this)));
    });

This is almost fine apart from the last line

StackMedia.prototype.updatePositions = function() {

    var sm = this; // StackMedia

    // set the css properties of the items
    this.items.each(function(i){
        $(this).css('left', sm.x + i * sm.overlapX);
        $(this).css('top', sm.y + i * sm.overlapY);
        $(this).css('width', sm.itemWidth);
        $(this).css('height', sm.itemHeight);
        $(this).find('img').css('width', sm.itemWidth);
        $(this).find('img').css('height', sm.itemHeight);
    });

    // set the css properties of the container
    //console.log(sm);
    console.log($(this));
    $(this).container.css('width', 400);

};

I get this again: TypeError: ‘undefined’ is not an object (evaluating ‘$(this).container.css’)

So $(this).container lost it’s jquery functionality, how can i get it back?

Answer 1

this.items is a jQuery object. Don’t loop over it using a normal for loop, use jQuery’s .each.

this.items.each(function(){
    $(this).css('left', 50);
});

I’m pretty sure .css affects all elements in a jQuery object, so you can just do:

this.items.css('left', 50);