插入內容使用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（）函數

回答

相關問題