html - 从单个列表中模仿两个列表

Question

我有一个无序列表：

<ul>
    <li class="title">title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li class="title">title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

我想显示此列表，其中标题将位于列表顶部。类似于以下结果：

<ul style="float:left;">
    <li>title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>
<ul style="float:left;">
    <li>title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

问题是我无法更改原始 html，我只能使用 css 来完成。这样的事情可能吗？我该怎么做？

这是两个列表 - 原始样式和所需样式：http: //jsfiddle.net/MNYnW/2/

Answer 1

愿你能用css3cloumn-count属性实现。像这样写：

CSS

.list {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 100px;
}

HTML

<ul class="list">
    <li>title1</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>title2</li>
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
</ul>

检查这个http://jsfiddle.net/MNYnW/16/

Answer 2

如果您需要跨浏览器完全动态的解决方案，您可以通过下面的 jQuery 来完成：

$(function() {

    var previousList = $('#list').html().split(/title[0-9]+/);  
    var newList = '';   
    var i = 1;

    $('#list > li').each(function() {
        var self = $(this);
        var title = /title[0-9]+/.test(self.text());

        if(!(self.index() == 0)) {
            if(title) {
                newList += '</ul><ul style="float: left;"><li>' + self.html() + previousList[i].substring(0, previousList[i].length - 4);
                i++;
            }
        }

        else {
            if(title) {
                 newList += '<ul style="float: left;"><li>' + self.html() + previousList[i].substring(0, previousList[i].length - 4);
                 i++;           
            }
        }        

    }); 

    newList += '</ul>';

    $('body').html(newList);
});