Javascript appendTo无法处理jquery中的每个

我必须在每个“div”上应用动画。但它只适用于第一个，而不是全部。 根据我的说法，“$（“#viewport”）.each（appendTo（c））；”这一行在javascript代码中不起作用

HTML代码：

         <div id="viewport"></div>
         <div id="viewport"></div>
         <div id="viewport"></div>

Javascript代码：

$(window).load(function(){
    $(function () {
            var a = 0;
            for (; a < 15; a += 1) {
                setTimeout(function b() {
                    var a = Math.random() * 1e3 + 5e3,
                    c = $("<div />", {
                    "class": "smoke",
                    css: {
                        opacity: 0,
                        left: Math.random() * 200 + 80
                    }
                });
                    **$("#viewport").each(appendTo(c));**
                    $.when($(c).animate({
                        opacity: 1
                        }, {
                        duration: a / 4,
                        easing: "linear",
                        queue: false,
                        complete: function () {
                            $(c).animate({
                                opacity: 0
                                }, {
                                duration: a / 3,
                                easing: "linear",
                                queue: false
                            })
                        }
                        }), $(c).animate({
                        bottom: $("#viewport").height()
                        }, {
                        duration: a,
                        easing: "linear",
                        queue: false
                        })).then(function () {
                        $(c).remove();
                        b()
                    });
            }, Math.random() * 3e3)
        }
}());
    });

$（窗口）.load（函数（）{
$（函数（）{
var a=0；
对于（；a<15；a+=1）{
setTimeout（函数b（）{
var a=Math.random（）*1e3+5e3，
c=$（“”{
“类”：“烟雾”，
css:{
不透明度：0，
左：Math.random（）*200+80
}
});
**$（“#视口”）。每个（附在（c）之后）**
$.when（$（c）.设置动画({
不透明度：1
}, {
持续时间：a/4，
放松：“线性”，
队列：false，
完成：函数（）{
$（c）.制作动画({
不透明度：0
}, {
持续时间：a/3，
放松：“线性”，
队列：false
})
}
})，$（c）。制作动画({
底部：$（“#视口”）.height（）
}, {
持续时间：a，
放松：“线性”，
队列：false
})).然后（函数（）{
$（c）.删除（）；
b（）
});
}，Math.random（）*3e3）
}
}());
});

首先

以$为单位添加函数

像

然后试试这个

$("[id=viewport]")

当你使用

$("#viewport") 

它仅选择具有给定ID的第一个元素

但是，当您选择“按属性”（例如本例中的id）时，它将返回所有匹配的元素，如下所示：

$("[id=viewport]") 

---

使用多个具有相同id的元素是绝对不好的做法！将“vieport”作为类并使用

$( ".viewport" )

.each（）函数将函数作为第一个参数，在该函数上下文中，“this”变量将包含元素

 $( ".viewport" ).each( function() {
    $( this ).appendTo( c );
 });

---

如果我没有错的话。你想要这样的东西：

HTML:

CSS:

请看这里的演示：

---

您可以在这里查看另一个示例演示：

这不是工作原理：它将函数作为参数。检查您的浏览器控制台是否存在错误（F12）。为什么为所有div提供相同的id，请为所有div使用公共类，因为动画对所有div都是相同的。这就是为什么我为所有div提供相同的id。好的，如果你这么说的话，我会更新。我已经检查了我的浏览器控制台，它显示了这个错误：“未捕获引用错误：未定义appendTo”

appendTo（）

，在对象上被调用。我不推荐这种不好的做法：即使这可能有效，

id

应该是。他还必须为每个元素使用单独的id或使用classyes我知道这是一种不好的做法，我也评论了相同的做法，但如果需要的话，这将是有用的

 $( ".viewport" ).each( function() {
    $( this ).appendTo( c );
 });

<div id="viewport">
  <div class="smoke smoke1"></div>
  <div class="smoke smoke2"></div>
  <div class="smoke smoke3"></div>
</div>

(function () {
    "use strict";

$('#viewport .smoke').each(function ns () {
  var initialTop = $(this).position().top;

  $(this).animate({
    top: - $(this).height()
  }, Math.random() * 2000 + 2000, function () {
    $(this).css({
      top: initialTop,
      opacity: 0
    });
  }).animate({
    opacity: 1
  }, ns)
});
}());

#viewport {
    position: relative;

    width: 400px;
    height: 300px;

    margin: 100px auto;
    border: 1px solid #333333;

    overflow: hidden;
}
#viewport .smoke {
    position: absolute;
    width: 20px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
    left: 140px;
    top: 260px;
}
#viewport .smoke2 {
    left: 180px;
    top: 260px;
}
#viewport .smoke3 {
    left: 220px;
    top: 260px;
}