Split long list of list items

[David]

Hello All,

I am trying to split a long list of list items ( li ) into 3 groups and
append them to a div on the page. Below is the test page that I have
created. It's fairly simple but I can't seem to get my head wrapped around
it. Anyone here can offer a boost?

http://mysite.verizon.net/microweb2/3collist.html

David J.

 

[David]

Or basically, how can you split an array into spearate groups by dividing
the length of the array by 3. If the array has 15 entries, how can I grab 3
chunks of 5 out of the 15 ?

David J.

 

[RobG]

Hello All,

I am trying to split a long list of list items ( li ) into 3 groups and
append them to a div on the page. Below is the test page that I have
created. It's fairly simple but I can't seem to get my head wrapped around
it. Anyone here can offer a boost?

http://mysite.verizon.net/microweb2/3collist.html

In the line:
var container = document.getElementByID('writeMe');

You have the wrong capitalisation for getElementById()

I think what you are trying to do is divide the li elements evenly
between 3 ul elements. If so, you need to work out how many to put
into each ul, then do it. Rather than try to munge the script you have,
I'll just post the following script give you some pointers:

function quickTest()
{
var numSections = 3; // Number of sections
var numPerSection; // Number in each section (calculate)
var extras = 0; // Remainder if not equal number
// in all sections

var oUL; // New ul element
var div = document.getElementById('pContent');
var ul = div.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
var numPerSection = lis.length/numSections | 0;

if (numPerSection) {
extras = lis.length % numSections;
} else {
numPerSection = lis.length;
}

for (var i=0; i<numSections; i++){
oUL = document.createElement('ul');

for (var j=0; j<numPerSection; j++){
oUL.appendChild(lis[0]);
}

if (extras-- > 0){
oUL.appendChild(lis[0]);
}
div.appendChild(oUL);
}
div.removeChild(ul);
}

 

[RobG]

Or basically, how can you split an array into spearate groups by dividing
the length of the array by 3. If the array has 15 entries, how can I grab 3
chunks of 5 out of the 15 ?

The algorithm is in my other reply to this thread:

1. Divide the number of items by the number of sections, the
result is the number per section - truncate any decimal part

2. If the number per section is less than 1, put all items in one
section.

3. Get numberOfItems modulo numberPerSection to find out what the
'remainder' is and distribute them evenly over the sections (put an
extra one on the first 'remainder' number of sections)

 

[David]

Yes Rob, that is exactly what I was trying to achieve. Many thanks. The
getElementById() was just a typo. I do know better than that

Now to soak all in what you did... thanks bundles...

David J.

Hello All,

I am trying to split a long list of list items ( li ) into 3 groups and
append them to a div on the page. Below is the test page that I have
created. It's fairly simple but I can't seem to get my head wrapped
around
it. Anyone here can offer a boost?

http://mysite.verizon.net/microweb2/3collist.html

In the line:
var container = document.getElementByID('writeMe');

You have the wrong capitalisation for getElementById()

I think what you are trying to do is divide the li elements evenly
between 3 ul elements. If so, you need to work out how many to put
into each ul, then do it. Rather than try to munge the script you have,
I'll just post the following script give you some pointers:

function quickTest()
{
var numSections = 3; // Number of sections
var numPerSection; // Number in each section (calculate)
var extras = 0; // Remainder if not equal number
// in all sections

var oUL; // New ul element
var div = document.getElementById('pContent');
var ul = div.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
var numPerSection = lis.length/numSections | 0;

if (numPerSection) {
extras = lis.length % numSections;
} else {
numPerSection = lis.length;
}

for (var i=0; i<numSections; i++){
oUL = document.createElement('ul');

for (var j=0; j<numPerSection; j++){
oUL.appendChild(lis[0]);
}

if (extras-- > 0){
oUL.appendChild(lis[0]);
}
div.appendChild(oUL);
}
div.removeChild(ul);
}

 

[David]

Can I ask you what this is?

var numPerSection = lis.length/numSections | 0;

I don't understand the pipe 0 part.

David

Yes Rob, that is exactly what I was trying to achieve. Many thanks. The
getElementById() was just a typo. I do know better than that

Now to soak all in what you did... thanks bundles...

David J.

Hello All,

I am trying to split a long list of list items ( li ) into 3 groups and
append them to a div on the page. Below is the test page that I have
created. It's fairly simple but I can't seem to get my head wrapped
around
it. Anyone here can offer a boost?

http://mysite.verizon.net/microweb2/3collist.html

In the line:
var container = document.getElementByID('writeMe');

You have the wrong capitalisation for getElementById()

I think what you are trying to do is divide the li elements evenly
between 3 ul elements. If so, you need to work out how many to put
into each ul, then do it. Rather than try to munge the script you have,
I'll just post the following script give you some pointers:

function quickTest()
{
var numSections = 3; // Number of sections
var numPerSection; // Number in each section (calculate)
var extras = 0; // Remainder if not equal number
// in all sections

var oUL; // New ul element
var div = document.getElementById('pContent');
var ul = div.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
var numPerSection = lis.length/numSections | 0;

if (numPerSection) {
extras = lis.length % numSections;
} else {
numPerSection = lis.length;
}

for (var i=0; i<numSections; i++){
oUL = document.createElement('ul');

for (var j=0; j<numPerSection; j++){
oUL.appendChild(lis[0]);
}

if (extras-- > 0){
oUL.appendChild(lis[0]);
}
div.appendChild(oUL);
}
div.removeChild(ul);
}

 

[RobG]

Can I ask you what this is?

var numPerSection = lis.length/numSections | 0;

I don't understand the pipe 0 part.

Please don't top post, reply below a trimmed quote.

'|' is a bit-wise OR operator which causes the first part of the
expression to be converted to an integer and truncated. It is the same
as:

var numPerSection = Math.floor( lis.length / numSections );


but shorter - some also say faster, but that is irrelevant here since
you have to do about 10,000 loops to notice.

 

[David]

'|' is a bit-wise OR operator which causes the first part of the

expression to be converted to an integer and truncated. It is the same
as:
var numPerSection = Math.floor( lis.length / numSections );

but shorter - some also say faster, but that is irrelevant here since
you have to do about 10,000 loops to notice.

Sorry about the top post and trim .. noted.

Thanks for your help and explanation(s)

David J.