элементы группировки javascript / jQuery

Question

Учитывая список динамически генерируемых флажков и меток (не html-меток, просто текст), каков наилучший способ сгруппировать эту информацию в более управляемый (и более легко отображаемый) список информации.Например, вот часть списка, с которым я работаю:

 <input type="checkbox" value="Alabama"/> Alabama <br> 
 <input type="checkbox" value="Alaska"/> Alaska <br> 
 <input type="checkbox" value="Arizona"/> Arizona<br> 
 <input type="checkbox" value="Arksansas"/> Arksansas<br>

... остальные штаты.

В идеале, я бы хотел, чтобы они находились в 4 или 5 столбцах одинаковой ширины, чтобы они не занимали всю длину экрана, как один длинный список.Я мог бы, вероятно, взломать и получить что-то, что работает, но я больше заинтересован в поиске подходящего решения этой проблемы.Заранее благодарим за любую помощь, которую вы можете предоставить.Спасибо!

Answer 1

Это очень грубо и не в моей голове, но что-то вроде этого должно разбить любое количество элементов на произвольные группировки:

var objects = $("input[type=checkbox]");
var groupings = 3; // think columns
var factor = objects.length / columns;
var groups = []

for (var i=0; i < objects.length; i++) {
    groups[Math.round(i / factor)] = objects[i];
}

Итак, теперь все ваши элементы-флажки разделены на три группы, доступные через массив groups. Вы можете их обернуть в div и создать столбцы, или подобный подход.

Answer 2

Я бы использовал HTML как:

<label><input name="state" type="checkbox" value="Alabama"/> Alabama</label>
<label><input name="state" type="checkbox" value="Alaska"/> Alaska</label>
<label><input name="state" type="checkbox" value="Arizona"/> Arizona</label> 
<label><input name="state" type="checkbox" value="Arksansas"/> Arksansas</label>

А затем сгруппировать их, используя jQuery

$('input[name="state"]').each(function(index, element) {
    if ((index % 4) == 3) {
      $(element).closest('label').after($('<br/>'));
    }
});​

JsFiddle: http://jsfiddle.net/5f86w/

Answer 3

Часто сайты используют буквенный указатель (A, B, C и т. Д.), Который можно нажимать, чтобы скрывать / отображать различные DIV, каждый из которых содержит список состояний по буквам.Это простой шаблон табуляции.

Для этого вы можете использовать одну из множества библиотек JS вкладок.