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漂浮你的李。给他们一个特定的宽度，你应该很好。

.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(''));

在两列中显示<ul>的元素</ul>

3 个答案: