Question

可以根据元素的数据属性在列表中创建两列外观吗？我的HTML无法真正被修改为两个列表（甚至使用JS打破了页面上的其他功能），如下所示：

<ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>

我希望输出显示为：

general text1               category text1
general text2               category text2
general text3               category text3
                            category text4

假设将始终按顺序对元素进行分组，这是相同的。

我不确定如何使用所需的输出实现此目的。浮动以左到右的方式放置元素而不是垂直布局。有什么想法吗？

Answer 1

如果插入空白行，则可以使用列计数轻松实现此目的。

div#twoColumn {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    line-height:1.5em;
    list-style-type:none;
}

<div id="twoColumn">
    <ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
     <li data-list="general_results">&nbsp;</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>
</div>

Answer 2

这就是我做的......

HTML CODE ..我得到data-list attr值，然后过滤掉它并附加到不同的div上。

<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>

<div id="gen_text_here">
</div>
<br />
<div id="cat_text_here">
</div>

JQUERY CODE：

$('ul li').each(function(){

  if($(this).attr("data-list") == 'general_results'){
     $('#gen_text_here').append($(this).attr("data-list") + '<br />');
  }else if($(this).attr("data-list") == 'category_results'){
     $('#gen_text_here').append($(this).attr("data-list")  + '<br />');
  }

});

Answer 3

不是一个非常优雅的解决方案，但它可以解决问题：

[data-list="general_results"] {
    float:right;
    clear:right;
}

在这里小提琴：http://jsfiddle.net/qUAT6/1113/

但我不支持这一点。正确的解决方案是将您的元素分成两个列表。

基于data- *属性的两列列表

3 个答案: