appendTo无法处理jquery中的每个

appendTo is not working with each in jquery

本文关键字：jquery 处理 appendTo      更新时间：2023-09-26

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

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

$( ".viewport" )

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

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

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

HTML:

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

JS:

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

CSS：

#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;
}

请在此处查看演示：http://jsfiddle.net/1rf31eyL/

您可以在此处查看另一个示例演示：http://gettycreations.com/

首先是

在$.每个中添加函数

像

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

然后试试这个，

$("[id=viewport]")

当你使用

$("#viewport")

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

然而，当您按属性（例如，您的案例中的id）进行选择时，它会返回所有匹配的元素，比如：

$("[id=viewport]")
相关文章：