插入内容使用JQuery .append（）函数

-1

<div class="tab-pane fade active in" id="tab-a"> 

</div>

我用这个插入JavaScript字符串数组到该标签：

var full_list = ""; 

for (var i = 0; i < data.length; ++i) { 
    full_list = '<a href="#' + data[i].alias + '">' + full_list + data[i].name + '<br>'; 
}"</a>" 

$(target).html(full_list);

和我内容被垂直地显示在单个列是这样的：

Dairy products 
Dancing Groups 
Dancing Instructors 
Data Communication Services 
Data Networking & Cabling 
Data Processing Equipment 
Day Care/Montessori Schools

我希望他们在两列这样的显示作为：

Dairy products     Data Networking & Cabling 
Dancing Groups     Data Processing Equipment 
Dancing Instructors   Day Care/Montessori Schools 
Data Communication Services

我该如何做到这一点？

来源

2017-09-29 jsb1001

在div中使用带tr td的表 – Niladri

您确定要将以前的所有'full_list'值更换为仅在for循环外部添加一次的'' tags? And why is ''吗？ –

我想用

– jsb1001

只需卸下br标签的链接，并设置column-countcss属性设置所需的列数以下。

.tab-pane { 
    column-count: 2; 
}

这是一个演示。

.tab-pane { 
 
    column-count: 2; 
 
} 
 

 
.tab-pane a { 
 
    display: block; 
 
}

<div class="tab-pane fade active in" id="tab-a"> 
 
    <a href="http://stackoverflow.com">Sample link 1</a> 
 
    <a href="http://stackoverflow.com">Sample link 2</a> 
 
    <a href="http://stackoverflow.com">Sample link 3</a> 
 
    <a href="http://stackoverflow.com">Sample link 4</a> 
 
    <a href="http://stackoverflow.com">Sample link 5</a> 
 
    <a href="http://stackoverflow.com">Sample link 6</a> 
 
    <a href="http://stackoverflow.com">Sample link 7</a> 
 
</div>

来源

2017-09-29 11:18:22 Thusitha

我建议改变一些事情，实现自己的目标，以及提高你的代码。

你的JS是做for循环中奇怪的事情，我改变了它使用reduce功能和字符串模板方法要更优雅：

var fullList = data.reduce((list, current) => { 
    return list + `<a href="#${current.alias}">${current.name}</a><br />`; 
}, '');

我们实现自己的目标，你需要添加如下CSS：

#tab-a { 
    column-count: 2; 
}

这里是一个codepen，说明了行为。

来源

2017-09-29 11:35:09

对于每件商品，您的验证码都有一个br。你需要有一个br为每第二项：

var full_list = ""; 
for (var i = 0; i < data.length; ++i) { 
full_list += '<a href="#' + data[i].alias + '">' + data[i].name + "</a>" + ((i % 2) ? '<br>' : ''); 
     } 

$(target).html(full_list);

注意，我已经感动锚闭幕进入for和br加当且仅当i是奇数。如果您需要这样做，您可以使用CSS来增加每对锚点的width。

来源

2017-09-29 12:46:53

插入内容使用JQuery .append（）函数

回答

相关问题