如何给每两个li添加一个ul

Question

<li><a href="#" >测试一 </a></li>
<li><a href="#" >测试二 </a></li>
<li><a href="#" >测试三 </a></li>
<li><a href="#" >测试四 </a></li>

如何用jquery 弄成

<ul>
    <li><a href="#" >测试一 </a></li>
    <li><a href="#" >测试二 </a></li>
</ul>
<ul>
    <li><a href="#" >测试三 </a></li>
    <li><a href="#" >测试四 </a></li>
</ul>

我本人是这样写的

<script>
$(function(){
    $('li:even').before('<ul>');
    $('li:odd').after('</ul>');
});
</script>

好像不行，直接在偶数li前面添加成了<ul></ul>
奇数li后面的</ul>没有。
本人菜鸟，我网上找了半天实在是找不到如何解决，恳请各位指教我一下。

Answer 1

HTML:

<div id="q0">
    <li><a href="#">测试一 </a></li>
    <li><a href="#">测试二 </a></li>
    <li><a href="#">测试三 </a></li>
    <li><a href="#">测试四 </a></li>
</div>

Javascript:

$(function () {

    var liElements = $('#q0').find('li'),
            ul = null;


    liElements.each(function (index) {
        if (index % 2 === 0)
            $('#q0').append(ul = $(document.createElement('ul')));

        $(this).appendTo(ul);
    });
}):
            

能实现题主要求的效果，但这种写法效率不好。

Answer 2

<div id="test">

<li><a href="#">测试一 </a></li>
<li><a href="#">测试二 </a></li>
<li><a href="#">测试三 </a></li>
<li><a href="#">测试四 </a></li>

</div>

var liEle = $("#test li");
for(var i = 0; i <= liEle.length;){

liEle.slice(i,i+=2).wrapAll('<ul></ul>');

};