Сложность при размещении правильных элементов

Question

Когда я нажимаю на золотую кнопку, а затем нажимаю на цифры 1024 или 2024 или 4048, я предпочел бы быть правым в середине созданных элементов. Кроме того, серебряные номера и неограниченное количество свободного трафика в настоящее время не требуется.

jsfiddle code

youtube video

$(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/