Question

假设有一个美国州名单，如下所示：

<ul>
    <li>Alabama</li>
    <li>Alaska</li>
    <li>Arizona</li>
    <li>Arkansas</li>
    <li>California</li>
    <li>Colorado</li>
    <li>Connecticut</li>
    <li>Delaware</li>
    <!-- and so on with all 50 -->
</ul>

很容易将它们格式化为只有CSS的四列：

li {float:left; width:25%;}
li:nth-of-type(4n+5) {clear:left;}

创建四列，并确保第五项始终清除以前的元素。

然而，这将导致第一列从阿拉巴马州，第二个阿拉斯加州，第三个亚利桑那州和第四个阿肯色州开始。

相反，我试图找出使所有四列包含相对相等数量的状态的最佳方法（50/4 = 12.5因此列1-3将包含13个列表项，最后一列将包含剩余的11个项目），同时，第一列应包含FIRST 13个州（即阿拉巴马州 - 伊利诺伊州），SECOND包含第14个到第27个州（印第安纳州 - 蒙大拿州），依此类推。

为此倾向于jQuery，到目前为止，我已经做到了：

var list_items_count = $('li').length, // get the total number of list items
    even_list_math   = list_items_count / 4, // divide that by 4 columns
    even_list_amount = Math.ceil(even_list_math), // round the number up
    column_1_start   = 0, // it doesn't = 1 because 0 = 1
    column_2_start   = even_list_amount, // 1st item in column 2
    column_3_start   = even_list_amount * 2, // 1st item in column 3
    column_4_start   = even_list_amount * 3; // 1st item in column 4

    $('li').each(function(index, val) {
        if (index == column_1_start) {
            $(this).before('<li><ul>');
        } else if (index == column_2_start || index == column_3_start || index == column_4_start) {
            $(this).before('</ul></li><li><ul>');
        } else if (index == list_items_count) {
            $(this).after('</ul></li>');
        }
    });

但是当我这样做时，jQuery想要关闭我的元素。

所以而不是：

<ul>
    <li><ul> <!-- this should be created in the first $(this).before() statement -->
        <li>Alabama</li>
...
</ul>

jQuery会自动关闭这些元素：

<ul>
    <li><ul></ul><li> <!-- the closing UL and LI tags shouldn't be here -->
        <li>Alabama</li>
...
</ul>

我可以阻止它这样做吗？或者我的jQuery还有其他问题需要修复或优化吗？

修改：虽然此示例显示了50个州，但我正在使用的内容是动态的。因此，它可能是1000种蔬菜的列表，3个国家，28种保持你的男人的方式，等等。所以这一切......

我也尝试使用.wrap()，但还没有运气。

var li_elems = $('li'),
    li_arr = $.makeArray( li_elems );
    while(li_arr.length) {
        li_arr.splice(0,even_list_amount);
    }
    $.each(li_arr, function(index, val) {
        $(this).wrap('<ul class="test"></ul>');
    });

Answer 1

您可以使用slice和wrapAll的组合。 Demo

解决方案很简单。

$(function() {
    var items = $('#list > li'),
    count = items.length,
    columns = 4,
    perColumn = Math.ceil(count/columns);

  for(var i = 0; i < columns; i++) {
    items
      .slice(i*perColumn, (i+1)*perColumn) //group
      .wrapAll('<li class="column"><ul class="inner"/></li>') //wrap
  }
})

如果您不关心旧浏览器，可以使用CSS3 multiple-columns layout。 Demo

ul {
  column-count: 4; //important part
  margin: 0;
  padding: 0;
}

将列表格式化为列的理想方法是什么？它们在垂直方向上保持字母顺序排列？

1 个答案: