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


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7