元素之后的jquery关闭元素并重新打开新元素

Question

我有一个包含输入复选框的内联列表项的大型UL。

http://jsfiddle.net/G3uyA/12/

目前，我正试图使用​​jquery将其分组。

这就是它之前的样子......

我试图通过在特定元素之后添加字符串</ul><ul class="gfield_checkbox checkbox">将其分组。所以它看起来像这样：

但我使用的任何jquery函数似乎都添加了这个字符串，但修改了字符串以完成元素并破坏了我的布局。

这是我的代码：

function group_series() {

    var motogp = $('.gchoice_2_6_3');
    var sbk    = $('.gchoice_2_6_6');
    var road   = $('.gchoice_2_6_8');
    var mx     = $('.gchoice_2_6_13');

    $(motogp,sbk,road,mx).after('</ul><ul class="gfield_checkbox checkbox">');

};

$("#go").click(function() {
    group_series();
});

我想要实现的是在每次关闭那些我声称为vars的元素之后删除html sting。

任何人都可以请求替代清洁解决方案吗？

Answer 1

你完全可以使用CSS3来避免使用javascript。

首先切换到浮点而不是内联块，如下所示：

.gfield_checkbox > LI {
    float:left;
    margin-left: 10px;
}

然后每隔3个清除浮子。

.gfield_checkbox > LI:nth-of-type(3n+1) {
    clear:both;
}

更新了Fiddle