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

Если Я не ошибаюсь. Вы хотите что-то вроде этого:

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/

Вы можете Ch Еще один пример примера здесь: http://gettycreations.com/

Answer 2

первую очередь функции

надстройкой в ​​$ .each

как

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

, а затем попробовать это,

$("[id=viewport]") 

При использовании

$("#viewport") 

он выбирает только первый элемент с заданным идентификатором.

Однако при выборе атрибута (например, идентификатор в вашем случае), он возвращает все соответствующие элементы, как так:

$("[id=viewport]") 

Answer 3

Использования более чем один элемент с тем же идентификатором является абсолютно порочной практикой! Помещенный «vieport» как класс и использовать

$(".viewport") 

.each функция() принимает функцию в качестве первого аргумента и в этой функции контексте «это» переменная будет содержать элемент

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