2016-05-17 52 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

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