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

【问题标题】：Two column list based on data-* attribute基于 data-* 属性的两列列表
【发布时间】：2015-07-23 06:38:41
【问题描述】：

可以根据元素的数据属性在列表中创建两列外观吗？我的 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>

我希望输出显示为：

一般文本1 类别文本1 一般文本2 类别文本2 一般文本3 类别文本3 类别文本4

假设总是将元素按顺序分组。

我不确定如何通过所需的输出来实现这一点。浮动以从左到右的方式放置元素，而不是垂直布局。有什么想法吗？

【问题讨论】：

所以你把它分为两类？
差不多，但只是视觉上的。有点需要它在语义上保持一致。
使用 jquery 怎么样？你可以做这样的事情。 $('ul li[data-list=general_results]').each(function(){ alert($(this).html()); });
我看不出它们在视觉上是如何分开的？如果我将这些
放入另一个元素或从它们所在的位置移动，那么已经在听它们的其他东西会中断，我会失去该功能。因为它是由另一个人构建的，所以我不明白它是如何工作的，这就是我希望 CSS 解决方案的原因

【解决方案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>

【讨论】：

我确实喜欢这个解决方案，但是尽管分组总是在一起，但每个分组的数量可能会有所不同，因此我无法可靠地添加或删除以创建相等的数字。
@jharry 我不知道你会怎么做，除非你把它们分成单独的列表？ jsfiddle.net/14uLept1
我确实通过 JS 将它们拆分为列表，但问题是 jQuery UI 自动完成功能中断了。

【解决方案2】：

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

HTML 代码.. 我得到 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>

查询代码：

$('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 />');
  }

});

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：