显示<ul>分成两列
Display elements of a <ul> in two columns
谁来帮我改变当前的功能,以显示两列元素,
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+'');
}
这是在单列中生成一个列表,但是我想在两列中显示它们。
请帮帮我。
这样行吗?
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>
用css浮动你的li's。给他们一个具体的宽度,你应该很好。
.options ul {
width:300px;
padding:0;
margin:0;
}
.options ul li {
float:left;
width:150px;
list-style:none;
padding:0;
margin:0;
}
在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(''));
相关文章:
- 带组的两列html表
- 单个交叉筛选器维度和两列上的组
- 使用 php 将类别和子类别显示为两列
- 将网格视图的两列相乘,并将其显示在新列中
- Angular ng sortable-如果我在一个栏中添加了一个搜索框,则拖放在两列之间无法正常工作
- 将列表拆分为两列.列表没有't具有块,但是需要在最接近的<p>标签
- 在两列中动态显示产品
- 两列全高布局展开以包含内容
- 计算文本块中的字符数,并将其拆分为两列
- 如何使用AngularJS而不是在查询子句中根据两列的差异对表进行排序
- 附加到两列中的一列,然后附加到另一列
- 两列布局,两列高度相同且均填充屏幕的整个高度
- 具有多个不同高度小部件的两列布局,如何使小部件可折叠并保持页面的流动性
- 如何将两个UL与JQuery合并,以便值交替
- 在两列中浮动不同数量的元素(左和右),即使高度不同
- 使用ISCroll实现两列无限滚动
- dataTables (jquery) 按两列搜索
- 将列表项换行/拆分为两个 ul
- 在悬停状态下用两列展开ul
- 将子类别悬停在两列中,打断ul菜单