Most efficient way to split a list into equal sized sublists using jquery?

Here's mine:) endyourif's response above is more concise, but this may be slightly more efficient as it assembles all the fragments first and then throws them in the dom with a single replace.

Here's mine:) endyourif's response above is more concise, but this may be slightly more efficient as it assembles all the fragments first and then throws them in the dom with a single replace. Var desiredNoOfCols = 3; var $parent = $("") for(var i=1;i ") } $("#column") .children() . Each(function(index, elem){ $parent .

Children(". Column" + ((index+1) % desiredNoOfCols + 1)) . Append($(elem).detach()) }) .end() .

ReplaceWith($parent.children()).

Looks good. I think I'll set up a test page soon to find a winner – wheresrhys Oct 21 at 8:39.

This is what I've come up with so far: var $ul = $(this), items = $ul. Children("li"), itemCount = items. Length, colHeight = Math.

Ceil(itemCount/3); // create temp DOM node to place the new lists in var temp = $(""), newUL, I = 1; while($ul. Children("li"). Length > colHeight) { newUL = $(""); newUL.

Append(items. Filter(":gt(" + ((i * colHeight)-1) + ")"). Filter(":lt(" + colHeight + ")")); i++; temp.

Append(newUL. AddClass("column" + i)); } temp.children(). InsertAfter($ul.

Attr("class","columns column1")).

This seems to work well, not sure how efficient it is though: 1 2 3 4 5 $(document). Ready( function() { var total = $("#column li").size(); console. Log(total); var count = 2; var column = 0; for (var I = 0; I '); $("#column" + column).

Html($("#column li"). Splice(0, count)); } $("#column").remove(); }).

The trouble with this is that slice() clones the li's rather than using the original ones. – wheresrhys Oct 17 at 15:32 Perhaps splice (w3schools. Com/jsref/jsref_splice.

Asp) would be better than as it will remove the elements from the array and return them? – endyourif Oct 17 at 15:38 But the jQuery collection is not a true array and slice is one of the few array methods that will work on an array-like collection; splice can't be applied to a jQuery collection as far as I know – wheresrhys Oct 17 at 16:21 I just double-checked and it looks like splice does work, but as it's not documented I'm gonna do some more testing to make sure it doesn't clone the elements. – wheresrhys Oct 17 at 16:25 Yep - seems to work - jsfiddle.Net/wheresrhys/tPcEE/#base – wheresrhys Oct 17 at 16:36.

Another possibility is to take a look at an existing plugin - multi column lists. The author of the plugin shows the code - you can take a look at the technique used there (a combo of CSS and splitting into smaller lists).

It looks like the plugin takes a two stage process - goes through each item adding a class to specify which column its in - running a jquery to select by these classes and moving those selected into the relevant column Which I doubt is more efficient, although the plugin looks to have thought of everything and is provbbaly a better general solution – wheresrhys Oct 21 at 8:38.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions