gnanasekaran: Split large list into three equal height lists using jQuery or split li into no of sub li

http://jsfiddle.net/whAyt/8/

JS:

function breakList(numOfLists, list){
var listLength = list.find("li").size();
var numInRow = Math.ceil(listLength / numOfLists);
for (var i=0;i<numOfLists;i++){
var listItems = list.find("li").slice(0, numInRow);
var newList = $('<ul/>').append(listItems);
$("body").append(newList);
}
}
breakList(3, $(".list"));

HTML:

<ul class="list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
</ul>

RESULT:

<body>
<ul class="list">

  </ul>


<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>

<ul>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>

<ul>
<li>List 7</li>
</ul>

</body>

gnanasekaran

Tuesday, February 2, 2016

Split large list into three equal height lists using jQuery or split li into no of sub li

No comments:

Post a Comment