Javascript each（）仅处理最后一个对象（使用foreach循环）

我试图调用HTML5画布动画，并使用类

.object

在每个项目中重复它。但是javascript只适用于最后一项

<ul>
    <li><canvas class="object"></canvas></li>
    <li><canvas class="object"></canvas></li>
    <li><canvas class="object"></canvas></li>
    <li><canvas class="object"></canvas></li> //this one shows
</ul>

---

您应该使用$（this.get（0）引用元素本身。我还没有尝试下面的代码，但它应该可以工作

$('.object').each(function(){
    var canvasEle = $(this).get(0);
    var $library = new lib.Animation();

    var $canvas_stage = new createjs.Stage(canvasEle);
    $canvas_stage.addChild($library);
    $canvas_stage.update();

    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", $canvas_stage);
});

---

如果您已经有了对元素的引用（如

each（）

code块中的引用），那么提取要传递给另一个函数以重新选择元素的元素类几乎没有意义；只需传递元素

还请注意，您当前的逻辑是有缺陷的，因为您在一个循环中有一个循环。请尝试此简化版本：

$('.object').each(function() {
    var library = new lib.Animation();
    var $canvas_stage = new createjs.Stage(this);
    $canvas_stage.addChild(library);
    $canvas_stage.update();
    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", $canvas_stage);
});

---

最后，你需要将你的HTML修改为你的结尾，因为我的实际项目使用了多个动画，有不同的库。（这就是为什么我最终得到了无法工作的双循环）。所以，如果你有更干净的方法，请分享。以下是我的项目中的代码：

JS:

---

您可以将此行

$（'.object'）.each（function（）{

更改为this

$（'.object'）。each（function（idx，obj）{

其中

id

是循环id（从零开始）而

obj

是数组当前循环中的实际

canvas

对象…让我知道这是否是你想要的我在函数中写什么？@ochi在那个例子中，

idx

是匹配集中元素的索引，与元素的

id

属性无关这就是我所说的t他循环id，应该说循环索引，但现在已经晚了；很抱歉混淆了是的，当简单地使用我的实际代码时，画布掉落只是一个草率的行为：）。Thx用于整洁的代码。这很好！没问题，很高兴能帮上忙。

$('.object').each(function() {
    var library = new lib.Animation();
    var $canvas_stage = new createjs.Stage(this);
    $canvas_stage.addChild(library);
    $canvas_stage.update();
    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", $canvas_stage);
});

$('.canvas').each(function(){
        $this = $(this);
        $objCol = $this.css('color');
        var $objColBG = $(this).css('background-color');

        //Audio
        if  ( $this.hasClass('orbeAudio')) {
                var $library = new lib.orbeAudio();
        }
        //Photo
        else if ($this.hasClass('orbePhoto')) {
                var $library = new lib.orbeText();
        } 
        //Text
        else if ($this.hasClass('orbePhoto')) {
                var $library = new lib.orbeText();
        }
        //Video 
        else if ($this.hasClass('orbeVideo')) {
                var $library = new lib.orbeVideo();
        }
        //Other 
        else if ($this.hasClass('orbeOther')) {
                var $library = new lib.orbeOther();
        } 

        var $orbeObj_stage = new createjs.Stage(this);

        var $orbeObj_root = $library;
        $orbeObj_stage.addChild($orbeObj_root);
        $orbeObj_stage.update();

        createjs.Ticker.setFPS(24);
        createjs.Ticker.addEventListener("tick", $orbeObj_stage);           
});