use divs from array as jquery object

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?

In your update: $(this).container should be this.container. Just like you do this.items. this is not a jQuery object, it's a StackMedia object. — gen_Eric
– gen_Eric, Commented Jun 10, 2012 at 19:26

gen_Eric · Accepted Answer · 2012-06-10 18:20:17Z

5

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

answered Jun 10, 2012 at 18:20

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

1 Comment

clankill3r Over a year ago

i updated the question, it's quite related i think, would be nice if you can take a second look.

Nishu Tayal · Accepted Answer · 2012-06-10 18:18:12Z

0

Your divs have css class stackItem, so you can easily access those div's using

$('.stackItem')

It'll return you all DIVs having this class. Try it.

Does not matter what container array contains now. :):)

answered Jun 10, 2012 at 18:18

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Comments

micadelli · Accepted Answer · 2012-06-10 18:18:55Z

0

Can't you just add an item variable?

StackMedia.prototype.updatePositions = function() {
     var item;

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

answered Jun 10, 2012 at 18:18

micadelli

2,4926 gold badges26 silver badges38 bronze badges

Comments

Grumsh · Accepted Answer · 2012-06-10 18:27:59Z

0

You could probably rewrite it as

StackMedia.prototype.updatePositions = function() {
   this.items.css('left', 50);
}

edited Jun 10, 2012 at 18:27

answered Jun 10, 2012 at 18:20

Grumsh

1396 bronze badges

Collectives™ on Stack Overflow

use divs from array as jquery object

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related