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

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' is not an object (evalating '$(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);
}