1つのul要素を2つに分ける

Ads

Result

jQuery

$('.two_ul').each(function(i){
        //li全部を2つに分ける
        var colsize = Math.round($(this).find("li").size() / 2);
        $(this).find("li").each(function(i){
            if (i>=colsize){
                //片方にclassを加える
                $(this).addClass('right');}
        });
        //ulでラップする
        $(this).find('.right').insertAfter(this).wrapAll("<ul class='left'></ul>");
    });

css

ul{display:block;float:left;margin:25px;}
.left li{color:red;}

html

<ul class="two_ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

via

jquery split ul into two – Snipplr

タイトルとURLをコピーしました