javascript - appendTo 不适用于 jquery 中的每个

Question

我必须在每个“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)
        }
}());
    });

Answer 1

使用多个具有相同 id 的元素绝对是一种糟糕的做法!将“vieport”作为类并使用

$( ".viewport" )

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

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