javascript / jQuery分组元素

Question

给出一个动态生成的复选框和标签列表（不是html标签，只是文本），将这些信息分组为更易于管理（更容易显示）的信息列表的最佳方法是什么。例如，以下是我正在使用的列表的一部分：

 <input type="checkbox" value="Alabama"/> Alabama <br> 
 <input type="checkbox" value="Alaska"/> Alaska <br> 
 <input type="checkbox" value="Arizona"/> Arizona<br> 
 <input type="checkbox" value="Arksansas"/> Arksansas<br>

......其他州。

理想情况下，我想让它们达到4或5个相等宽度的列，这样它们就不会占据屏幕的整个长度，就像一个长列表一样。我可能会破解并获得有效的东西，但我更感兴趣的是找到适合这个问题的解决方案。提前感谢您提供的任何帮助。谢谢！

Answer 1

网站经常使用可点击的字母索引（A，B，C等）隐藏/显示不同的DIV，每个DIV都按字母显示状态列表。这是一个简单的标签模式。

您可以使用众多选项卡JS库中的一个来执行此操作。

Answer 2

这是非常粗糙的，并且在我的头顶，但是这样的事情应该将任意数量的元素分成任意分组：

var objects = $("input[type=checkbox]");
var groupings = 3; // think columns
var factor = objects.length / columns;
var groups = []

for (var i=0; i < objects.length; i++) {
    groups[Math.round(i / factor)] = objects[i];
}

现在，您已将所有复选框项目拆分为可通过groups数组访问的三个分组。你可以将它们包装在div中并创建列，或者类似的方法。

Answer 3

我会使用HTML，如：

<label><input name="state" type="checkbox" value="Alabama"/> Alabama</label>
<label><input name="state" type="checkbox" value="Alaska"/> Alaska</label>
<label><input name="state" type="checkbox" value="Arizona"/> Arizona</label> 
<label><input name="state" type="checkbox" value="Arksansas"/> Arksansas</label>

然后使用jQuery对它们进行分组

$('input[name="state"]').each(function(index, element) {
    if ((index % 4) == 3) {
      $(element).closest('label').after($('<br/>'));
    }
});​

JsFiddle：http://jsfiddle.net/5f86w/