顯示元素

Question

有人請幫助我改變當前功能兩列顯示的元素，

function nextCode(flag) 
{ 
    var code = codes[flag]; 
    $('.headers').html(''+code[0]+''); 
    var sum;for(var j=1;j<=code.length;j++) 
    { 
    sum+="<li>"+code[j]+"</li>"; 
    } 
    sum="<ul>"+sum+"</ul>"; 
    $('.options').html(''+sum+''); 
} 

這是發生在單個列一個清單，但我想在兩到顯示它們列..
請幫我對此。

Answer 1

這是否會做你的工作？

function nextCode(flag) 
      { 
       var code = codes[flag]; 
       code = ["test1", "test2", "test3", "test4", "test5"]; //Testing purpose data 
       $('.headers').html(''+code[0]+''); 
       var sum=""; 
       var sum1=""; 

       for(var j=0;j < code.length;j++) { //Iteration changes required in code 
        if(j%2 > 0) { 
         sum += "<li>" + code[j] + "</li>"; 
        } else { 
         sum1 += "<li>" + code[j] + "</li>"; 
        } 
       } 

      sum = "<ul style=\"position: relative; float: left;\">" + sum1 + "</ul>" + "<ul style=\"position: relative; float: left;\">" + sum + "</ul>"; 
      $('.options').html(''+sum+''); 
      } 
      </script> 

Answer 2

用css浮動你的li。給他們一個特定的寬度，你應該很好。

.options ul { 
    width:300px; 
    padding:0; 
    margin:0; 
} 
.options ul li { 
    float:left; 
    width:150px; 
    list-style:none; 
    padding:0; 
    margin:0; 
} 

Answer 3

有一個在HTML或CSS沒有設施這一點，所以你只需要在內存管理兩個或多個列，這樣的事情：

var list_items = ['Bacon', 'Cheese', 'Beer', 'Beef', 'Ham', 'Honey', 'Tuna', 'Coffee']; 
var list_len = list_items.length; 
var num_columns = 2; 
var column_size = Math.ceil(list_len/num_columns); 
var html = ['<ul>']; 
var push = Array.prototype.push; 

for (var i=0; i < list_len; i++) { 
    if (i && i % column_size === 0) html.push('</ul><ul>');  
    push.apply(html,['<li>',list_items[i],'</li>']); 
} 
html.push('</ul>'); 

$('.destination').html(html.join(''));