JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<ol class="splitcol">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
<li>siete</li>
<li>ocho</li>
<li>nueve</li>
</ol>
CSS
.splitcol, .split_otravez {
margin-bottom: 20px;
list-style: inside decimal none;
}
.right_col {
margin-bottom: 5px;
list-style: inside decimal none;
background-color: #ccc;
}
.right_colcf3 {
margin-bottom: 5px;
list-style: inside decimal none;
background-color: #cf3;
}
JavaScript
/*
$('.split_otravez').each(function() {
var t = $(this),
children = t.children(),
otroList = t.clone(false).empty().insertAfter(this),
length = Math.ceil(children.length / 2);
children.slice(length).appendTo(otroList);
if(this.nodeName === 'OL'){
otroList.attr('start', length + 1);
}
});
*/
$('.splitcol').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 3);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='splitcol' start='" + (colsize+1) + "'></ol>").removeClass("right_col").addClass("right_colcf3")
.parent().removeClass("splitcol")
.addClass("split_otravez").find("li .right_colcf3")
.insertAfter(this).wrapAll("<ol class='split_otravez' start='" + (colsize+1) + "'></ol>").removeClass("right_colcf3");
}else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='splitcol'></ul>").removeClass("right_col").addClass("right_colcf3")
.parent().removeClass("splitcol")
.addClass("split_otravez").find("li.right_colcf3")
.insertAfter(this).wrapAll("<ul class='split_otravez' start='" + (colsize+1) + "'></ul>").removeClass("right_colcf3").addClass("right_col");
}
});