Question

我有一个像这样的javascript类（我知道它在技术上不是一个类）。

function StackMedia (container) {

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

}

我传递一个容器（div），它包含css类stackItem的其他div，它们存储在项目中。

我想重复使用它：

StackMedia.prototype.updatePositions = function() {

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

问题是它不再是一个jquery对象，所以我得到了这个错误：

TypeError：'undefined'不是函数（评估'this.items [i] .css（'left'，50）'）

如何将它们存储为jquery对象？

更新

这是我创建类的地方（工作正常）：

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

除了最后一行

之外，这几乎没有问题

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

};

我再次得到这个： TypeError：'undefined'不是对象（评估'$（this）.container.css'）

所以$(this).container丢失了它的jquery功能，我怎么能把它取回来？

Answer 1

this.items是一个jQuery对象。不要使用普通的for循环遍历它，使用jQuery的.each。

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

我很确定.css会影响jQuery对象中的所有元素，所以你可以这样做：

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

Answer 2

你的div有css类 stackItem ，所以你可以使用

轻松访问这些div

$('.stackItem')

它会让所有拥有这门课程的DIV回归你。试试吧。

现在包含哪个容器数组无关紧要。：）：）

Answer 3

你不能只添加一个项目变量吗？

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

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

Answer 4

您可能会将其重写为

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

使用数组中的div作为jquery对象

4 个答案: