javascript - 追記すると出現する謎要素

Question

私は次のPHPとJSを持っています：

<?php
    // Here's where the array of objects is built
    $depthElements = array(
        array('http://placehold.it/300x300',-150,100,0.8),
        array('http://placehold.it/200x300',-270,458,0.7)
    );
?>
<script>
var depthElems = <?php echo(json_encode($depthElements)); ?>;
</script>

多次元の PHP 配列を構築し、JS 用にパッケージ化します。

jQuery(document).ready(function($) { 

    // Create and position the elements on the page
    for (element in window.depthElems) {
        var a = window.depthElems[element];
        $('body').append('<img src="' + a[0] +
                         '" style="margin-left: ' + a[1] + 
                         'px; top: ' + a[2] + 
                         'px;" data-velocity="' + a[3] +
                         '" class="depthElem" />'); 
    }

    $(document).scroll(function () {
        var topDist = $(document).scrollTop();
        $('.depthElem').each(function () {
            $(this).css('margin-top', -topDist*($(this).attr('data-velocity')+'px'));
        });
    });
});

これは私には理にかなっているように思えますが、何らかの理由で、私が求めていない余分な要素がページにたくさんあります。

彼らはどこから来たのですか？

Answer 1

for...in配列をループするために使用していますが、これは推奨されません。その結果、おそらく、ループするつもりのなかった一連のプロパティを取得し、結果としてガベージ アペンドを取得しています。

for (var i = 0; i < array.length; i++)代わりに通常の for ループ ( ) を使用すると、期待どおりに動作するはずです。

Answer 2

はfor in ...、Arrayオブジェクトのプロパティも繰り返し処理するため、問題を引き起こしています。

forループを次のように変更します。

$.each(window.depthElems, function(i, a){
    $('body').append('<img src="' + a[0] +
                         '" style="margin-left: ' + a[1] + 
                         'px; top: ' + a[2] + 
                         'px;" data-velocity="' + a[3] +
                         '" class="depthElem" />'); 
});