Question

我有像这样的div元素：tab：

<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

我怎样才能做到这一点？

Answer 1

只需删除链接的br标记，然后设置column-count css属性即可设置所需的列数，如下所示。

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

这是一个演示。

＆＃13;

.tab-pane {
  column-count: 2;
}

.tab-pane a {
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 2

我建议您更改一些内容以实现目标并改进代码。

你的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，用于说明行为。

Answer 3

您的代码每个项目都有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。

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

3 个答案: