Как с помощью js расположить динамический список в две колонки?

Question

[Андрей]

Каким образом с помощью js расположить динамическое кол-во городов в две колонки: половину списка в левую колонку, другую половину в правую (как на скриншоте)?

Answer 1

[Константин Китманов]

Два дива, обходим массив с городами, когда счетчик обхода чётный -- аппендим в один див, когда нечетный -- в другой.

Answer 2

[Alex]

Такое можно сделать и на CSS

.клас_контейнера li:nth-child(odd) {
float: left;
}

Или на jQuery както так.

$( ".клас_контейнера li:odd" ).css( "float: left" );

Answer 3

[Rad1calDreamer]

если уж охото делать на js, то вот можно поробовать welcome.totheinter.net/columnizer-jquery-plugin

Answer 4

[Isaac Clark]

<ul id="listCitiesLeft"></ul>
    <ul id="listCitiesRight"></ul>

var cites = ["Алупка", "Алушта", "Армянск", "Бахчисарай", "Белогорск", "Джанкой", "Евпатория", "Керчь",
             "Красноперекопск", "Саки", "Севастополь", "Симферополь", "Старый Крым", "Судак",
              "Феодосия", "Щёлкино", "Ялта"];

function createList(cites) {
    var listLeft = document.getElementById('listCitiesLeft'),
        listRight = document.getElementById('listCitiesRight'),
        li = null,
        getSide = null;

    var citesCount = cites.length,
        leftColumn = Math.floor(citesCount / 2);

    function createCity(city, getSide) {
        li = document.createElement('li');
        li.innerHTML = city;
        getSide.appendChild(li);
    }

    for (var i = 0; i < citesCount; i ++) {
        i < leftColumn ? getSide = listLeft : getSide = listRight;

        createCity(cites[i], getSide);
    }
}
createList(cites);