Question

一个javascript的问题!现在是这样,程序那边有一组ul li的数据,我想把这组数据,每三个一列进行重组!

比如结构是这样的一组数据 (数据条数是随机的,不一定是是7条,我这个是例子)
<div class="ttt">
<ul>
<li><a href="#">ssssss1</a></li>
<li><a href="#">ssssss2</a></li>
<li><a href="#">ssssss3</a></li>
<li><a href="#">ssssss4</a></li>
<li><a href="#">ssssss5</a></li>
<li><a href="#">ssssss6</a></li>
<li><a href="#">ssssss7</a></li>
</ul>
</div>

我想通过js重新生成为最终结构是这样的
<div class="bbb">
<ul>
<li><a href="#">ssssss1</a></li>
<li><a href="#">ssssss2</a></li>
<li><a href="#">ssssss3</a></li>
</ul>
</div>
<div class="bbb">
<ul>
<li><a href="#">ssssss4</a></li>
<li><a href="#">ssssss5</a></li>
<li><a href="#">ssssss6</a></li>
</ul>
</div>
<div class="bbb">
<ul>
<li><a href="#">ssssss7</a></li>
</ul>
</div>
就是每3个li包含到新的div里面去,当不足3个的时候就显示本身的那个,或是2个

Answer 1

<div class="ttt">
    <ul>
        <li><a href="#">ssssss1</a></li>
        <li><a href="#">ssssss2</a></li>
        <li><a href="#">ssssss3</a></li>
        <li><a href="#">ssssss4</a></li>
        <li><a href="#">ssssss5</a></li>
        <li><a href="#">ssssss6</a></li>
        <li><a href="#">ssssss7</a></li>
    </ul>
</div>

<script>
window.onload=function(){
    var ndiv="";
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i+=3){
        ndiv+="<div class=bbb><ul>";
        for(var j=i;j<i+3&&j<lis.length;j++){
            ndiv+=lis[j].outerHTML;
        }
        ndiv+="</ul></div>";
    }
    document.getElementsByTagName("div")[0].outerHTML=ndiv;
}
</script>