jquery - jQuery even position DOM wrapping

Question

I have following html code and i want to close div and wrap two ul inside of div.

Ul will be more and more because it will dynamically added.

<div class="span9 well viewDetailDiv">
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
    </ul><ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
</div>

I want output as below.

<div class="span9 well viewDetailDiv">
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
</div>
<div class="span9 well viewDetailDiv">
    <ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
    </ul><ul class="span6 pull-left">
        <li></li>
        <li></li>
    </ul>
</div>

I have tried

$('.viewDetailDiv ul:even').not(':first').css('margin-left','0').wrapAll('<div class="span9 well viewDetailDiv">');
$('.viewDetailDiv ul:nth-of-type(2)').nextUntil('ul').andSelf().wrapAll('<div class="span9 well viewDetailDiv">');

$('.viewDetailDiv ul').each(function()
{
    $(this).nextUntil('ul:even').andSelf().wrapAll('<div class="span9 well viewDetailDiv" />');
});

$('.viewDetailDiv ul').each(function()
{
    $(this).nextUntil('ul:even').prev().wrapAll('<div class="span9 well viewDetailDiv" />');
    console.log($(this).nextUntil('ul:even'));
});

none of the above code solve my problem.

So if you guys see the error please let me know so i can correct myself.

Answer 1

尝试这个，

$(document).ready(function(){               
     var uls = $("ul");
     for(var i = 0; i < uls.length; i+=2) {
          uls.slice(i, i+2).wrapAll("<div class='span9 well viewDetailDiv'></div>");
     }
});

工作小提琴

使用 JS 将成对的 <li> 包装在 div 中的逻辑