jquery - 难以放置正确的元素

Question

当我单击金色按钮，然后单击数字 1024 或 2024 或 4048 时，我宁愿在创建元素的中间。此外，目前不需要银色数字和无限免费流量。

jsfiddle代码

Youtube 视频

$(function ()
{
    var groupTypes = null;
    var count = 0;
    var url = 'http://dl.dropboxusercontent.com/s/l5rijjpp8b784n2/Groups3?m';
    $.getJSON(url, null, function (data)
    {
        groupTypes = data;
        var $list = $('<ol id="selectable" />');
        $.each(groupTypes, function (i, groupType)
        {
            var $li = $('<li />');
            $li
                .addClass('ui-widget-content')
                .attr('data-index', i)
                .html(groupType.Name);
            $list.append($li);
            $li.on('click', function ()
            {
                count++;
                var index = $(this).attr('data-index');
                $(this).parent().find('li').removeClass('ui-selected');
                $(this).addClass('ui-selected');
                var speeds = groupTypes[index].GroupSpeeds;
                console.log(speeds);
                var $speedList = $('<ol id="selectable" />');
                $('.speed').remove()
                $.each(speeds, function (i, speed)
                {
                    if (speed)
                    {
                        var $speedLi = $('<li />');
                        $speedLi
                            .addClass('ui-widget-content speed')
                            .attr('data-index', i)
                            .html(speed.Speed);
                        $speedList.append($speedLi);
                        $speedLi.data('speed', speed);
                        $speedLi.click(function ()
                        {
                            traffic(this);
                        });
                    }
                });
                $('body').append($speedList);
            });
        });
        $('#container').append($list);
    });

    function traffic(elem)
    {
        var $list = $('<ol id="selectable" />');
        var groupTraffics = $(elem).data('speed').GroupTraffics;
        $.each(groupTraffics, function (i, t)
        {
            var $li = $('<li />');
            $li
                .addClass('ui-widget-content')
                .attr('data-index', i)
                .html(t.Traffic);
            $list.append($li);
            $.each(groupTraffics, function (i, groupTraffic)
            {
                $li.on('click', function ()
                {
                    var index = $(elem).attr('data-index');
                    $(this).parent().find('li').removeClass('ui-selected');
                    $(this).addClass('ui-selectd');
                    var traffics = groupTraffic[index].Traffic;
                    var $trafficList = $('<ol id="selectable" class="traffic" />');
                    $('.traffic').remove();
                    $.each(traffics, function (i, traffic)
                    {
                        if (traffic)
                        {
                            var $trafficLi = $('<li />');
                            $trafficLi
                                .addClass('ui-widget-content ')
                                .attr('data-index', i)
                                .html(traffic.Traffic);
                            $trafficList.append($trafficLi);
                        }
                    });
                    $('body').append($trafficList);
                });
                $('#container').append($list);
            });
        });
    }
});

Answer 1

看看这个例子是否有帮助。在您的交通功能中，当您添加列表时将其更改为：

function traffic(elem) {
  .......

  $('ol:last').after($list);
}

http://jsfiddle.net/vgPkU/5/