jquery – 如何在语义上将单个列表分成多个列？

参见英文答案 > CSS: Set divs horizontally in 2 rows4个
我们的网站用于将单个列表分成多列的当前方法是使用多个uls：

<ul>
  <li>one</li>
  <li>two</li>
</ul>
<ul>
  <li>three</li>
  <li>four</li>
</ul>

这对我来说似乎并不理想,因为从语义上讲,它不是两个列表,而是一个列表.我已经看到很多不适合多列列表的解决方案.我正在寻找一个解决方案：

>使用以下标记结构

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

>组织如下：

one    three
two    four

不是这个：

one    two
three  four

>如果列表长度发生更改,或者项目包含多行,则无需修改即可工作.
>使用有效的语义HTML.
>适用于IE8.

理想的解决方案仅限CSS,但我愿意使用jQuery UI或轻量级Javascript.

(PS,here’s my CSS attempt,有明显的问题.)

编辑：此问题特定于语义列表.另一个所谓的“重复”问题是关于< div>元素,这是一个不同的球赛,因为允许额外的标记. < ul>之间不允许额外的标记.和< li>.这个问题集中在语义上,这意味着强调使用HTML尽可能详细地指出内容的含义.

解决方法

您可以将列用于支持它的浏览器

DEMO http://jsfiddle.net/kevinPHPkevin/eaewX/33/

这是一个完整浏览器支持的jQuery示例

DEMO http://jsfiddle.net/kevinPHPkevin/MKL4g/131/

var postsArr = new Array(),$postsList = $('ul.posts');
 
//Create array of all posts in lists
$postsList.find('li').each(function(){
    postsArr.push($(this).html());
})
 
//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0,Math.round(postsArr.length / 2)),secondList = postsArr,ListHTML = '';
 
function createHTML(list){
    ListHTML = '';
    for (var i = 0; i < list.length; i++) {
        ListHTML += '<li>' + list[i] + '</li>'
    };
}
 
//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);
 
//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul class="posts"></ul>').next().html(ListHTML);

jquery – 如何在语义上将单个列表分成多个列？

解决方法

猜你在找的jQuery相关文章