2016-05-17 54 views
1

我的JS腳本允許我輸出順序的用戶輸入在下面(計數器迭代和\噸間距)的順序爲:outputing數據

1. ab  2. bc 3. cd 
4. de  5. ef 6. fg 
7. gh  8. hi 9. ij 
10. jk 11. ys 

用戶僅給出1輸入字段中輸入1個條目一次。 11是不是最後一項,因爲他們可以繼續他們的工作輸入更多。 如何顯示

1. ab  5. ef 9. ij 
2. bc  6. fg 10. jk 
3. cd  7. gh 11. ys 
4. de  8. hi 

我的腳本:

dnm_data.list_count += 1; 
var data_output = "<b>" + dnm_data.list_count + ".</b> " + data; 

if (dnm_data.list_count % 3 === 0) 
    data_output = "<div class='col-xs-4'>" + data_output + "</div><div class='clearfix'></div>"; 
else 
    data_output = "<div class='col-xs-4'>" + data_output + "</div>"; 

$("#log-wrapper") .append(data_output) 
        .addClass("bg-success") 
+0

歡迎SO。 請閱讀[我可以問哪些主題](http://stackoverflow.com/help/on-topic) 和[如何提出一個好問題](http://stackoverflow.com/help/how-to - 問) 和[完美的問題](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) – RiggsFolly

+0

你可以垂直輸出他們在一個div而不是跨越,和然後關閉它並在適當的時候在它旁邊打開一個新的? –

回答

2

你可以把所有的輸入值在數組中,經過每個輸入其分割數據(或其它)的3塊相同,重建整個事情。

但是,您可能需要查看css3列。你只需像現在一樣附加到一個包裝器上,而css將負責其餘部分。

https://jsfiddle.net/5q3tqcrm/

div,並且ul/li試了一下。唯一的缺點是,當有4個值時,它會變爲2列,因爲在移動之後它總是會在第3列中清除2個位置。

信息&資源:http://caniuse.com/#search=multiple%20column

+0

不錯的例子。我看到你提到的缺陷。 –