不要在 Jquery 中更改索引答案

【问题标题】：Dont change index in Jquery不要在 Jquery 中更改索引
【发布时间】：2016-07-08 14:18:36
【问题描述】：

我创建了一个带有地图的页面，我需要在地图上粘贴巴士站。我创建了一个带有 X 和 Y 坐标的 busA 和 busB 数组。但是，当我想创建一个带有坐标的“.bus-stop”元素时（busstop0 与 busA0、busB0；busstop1 与 busA1、busB1...），所有公交车站都有默认样式，只有最后一个公交车站有最后一个busA 和 busB 坐标。

var busA, busB, i;
busA = [150, 250, 350];
busB = [200, 300, 400];

$.each(busA, function(index){
    $(document).ready(function(){
        $(".scale1").prepend($('<div class="bus-stop"><div class="stop-info"></div></div>'));
        $(".bus-stop").eq(index).css({'top': busA[index] + 'px', 'left': busB[index] + 'px'});
    });
});

【问题讨论】：

标签： jquery indexing each

【解决方案1】：

使用 jQuery 创建元素并在创建过程中添加样式

$(function() {
    var busA = [150, 250, 350];
    var busB = [200, 300, 400];

    $.each(busA, function(index, bus){
        $(".scale1").prepend(
            $('<div />', {
                'class' : 'bus-stop',
                css     : {
                    position: 'relative',
                    top  : bus + 'px',
                    left : busB[index] + 'px'
                }
            }).append(
                $('<div />',  {
                    'class' : 'stop-info'
                })
            )
        );
    });
});

【讨论】：