How to turn a very long column into a few shorter ones?

Question

This is a difficult question / issue. I hope you find this interesting.

Scenario: you have a very long list (unreasonably long) in one column. This will be much better displayed in a few shorter columns. Using jQuery or another tool, what are you doing?

The format of the list is as follows:

<div class="toc">
    <dl>
        <dt>item 1</dt>
        <dd>related to 1</dd>
        <dt>item 2</dt>
        <dd>related to 2</dd>
        <dt>item 3</dt>
        <dd>related to 3</dd>
        <dt>item 4</dt>
        <dd>related to 4</dd>
        <dt>item 5</dt>
        <dd>related to 5</dd>
        <dt>item 6</dt>
        <dd>related to 6</dd>
        <dt>item 7</dt>
        <dd>related to 7</dd>
        <dt>item 8</dt>
        <dd>related to 8</dd>
        <dt>item 9</dt>
        <dd>related to 9</dd>
        <dt>item 10</dt>
        <dd>related to 10</dd>
    </dl>
</div>

Caveat: dd can contain nested dl, dt and dd.

Also remember to keep the related items in the same column (i.e. if dt 7 is col x, so dd 7).

This issue was inspired by the somewhat ridiculously laid out Zend Framework Guide .

Edit: See answer below.

Answer 1

. , , .

, <table><tr><td></td></tr></table>, n- dd a </td><td>. , ? , . , $('</td><td>').after('.toc > dl > dd'), - . , .

, , - . ? for. . n- dd , . , jQuery? , . ( > =) (< =), .

- :

for (i = 0; i < len; i+=40) { // where 40 determines the # per col
  get elements i thru i+40;
  wrap this set and float left  
}

, jQuery?

// note that you must use > to prevent nested descendants from being selected
var len = jQuery('.toc > dl > dd').size()
for (i = 0; i < len; i+=40) {
  // this selector says give me the first 40 child elements 
  // whatever type of element they may be
  $('.toc > dl > *:gt('+i+'):lt('+(i+40)').wrapAll('<div style="float:left">');

  // however because we don't have >= and :gt won't accept negatives as an input
  // we must either do a special case for the first iteration 
  // or construct a different selector
  $('.toc > dl > *:eq('+i+')', ' + 
    '.toc > dl > *:gt('+i+'):lt('+(i+40)')
        .wrapAll('<div style="float:left">');
}

- jQuery add(), , , jQuery , .

, for , . , $('selector').each(function () { });, , .

, ? :

$('.toc').after('<div id="new"></div>');
do {
    var curSet = $('.toc > dl > *:lt(40)')
           .appendTo('#new').wrapAll('<div style="float:left"></div>');
} while (curSet.size());

div . 40 div div, , , , , .

, , , , , . .

:

dt togglers, dd. - php (5-10 LOC), ajax- ajax.

, , < 2 ( ajax < 1 ), , 15-20 !

. - 10-15 javascript ( , ajax-), < 10 PHP .

Zend- .

Answer 2

$( "dt" ), , , .

Answer 3

:

(.. dt 7 - col x, dd 7).

column-count, :

http://pici.se/pictures/small/vekPcSkFE.png

, CSS 3, ... .: (

Answer 4

json, dt + dd +, .

json .

, , , .

.