Добавьте каждый 10-й элемент в новый <ul>

Question

Добавьте каждый 10-й элемент в новый <ul>

0

У меня есть некоторый вклад от звонка json, который дает мне очень большой список из 30 брендов. Я хочу разделить список на три отдельные ul. Таким образом, каждая ul имеет 10 брендов.

У меня есть это:

HTML:

              <ul class="column_1">

              </ul>
              <ul class="column_2">

              </ul>
              <ul class="column_3">

              </ul>

Jquery:

          <script type="text/javascript">                           
            $.getJSON('http://link.to.brands/?format=json', function(data){
              var count = 1;
              $.each(data.brands, function(index, brand){
              $('<li><a href="'+brand.url+'" title="'+brand.title+'">'+brand.title+'</a></li>').appendTo('.block.third .column_'+count);
              count++
              });

            });
          </script>

Теперь первые три бренда помещаются в ul вместо блоков из 10. Так что я думаю, что мой подход ошибочен. Как мне это сделать. Некоторые объяснения более приветствуются!

Meules 28 нояб. 2013, в 14:16

Источник

0

Вы в основном там. Просто замените count++ на count = (count % 3) + 1 , чтобы после третьего столбца он снова возвращался к column_1 , вместо того, чтобы пытаться column_4 и так далее.
Shai 28 нояб. 2013, в 12:33

Теги:

jquery

json

3 ответа

Ещё вопросы

Вы в основном там. Просто замените count++ на count = (count % 3) + 1 , чтобы после третьего столбца он снова возвращался к column_1 , вместо того, чтобы пытаться column_4 и так далее.

Shai · Answer 1 · 2013-11-28T11-20-00.000Z

Если вы хотите добавить в столбцы: `1, 2, 3, 1, 2, 3, 1, 2, 3,...`

Если ты хочешь:

B1  | B2  | B3
B4  | B5  | B6
B7  | B8  | B9
B10 | B11 | B12
B13 | B14 | B15
B16 | B17 | B18
B19 | B20 | B21
B22 | B23 | B24
B25 | B26 | B27
B28 | B29 | B30

то вы в основном там: просто замените

count++

с

count = (count % 3) + 1

Если вы хотите, чтобы первые 10 брендов вошли в столбец_1, следующие 10 в столбец_2,...

Кроме того, если вы хотите:

B1  | B11 | B21
B2  | B12 | B22
B3  | B13 | B23
B4  | B14 | B24
B5  | B15 | B25
B6  | B16 | B26
B7  | B17 | B27
B8  | B18 | B28
B9  | B19 | B29
B10 | B20 | B30

затем измените свой .appendTo на:

.appendTo('.block.third .column_' + (Math.floor(index / 10) + 1))

и вы можете полностью избавиться от переменной count.

Это именно то, что я ищу (второй). Тем не менее, ваш код не работает. У вас есть другое решение?
Что именно не работает? Рабочий пример здесь: jsfiddle.net/ZVd5X/3 ... Пожалуйста, опубликуйте свой HTML (интересно, если вы имели в виду .block.third.column_ вместо .block.third .column_ или что-то еще?
Ну, код работает, но результат (Math.floor (index / 10) + 1) ничего не значит или не так. Элементы li не добавляются в столбец, потому что каждый добавляется в column_ вместо column_1 или 2 или 3 и т. Д. Но просто любопытно ... это index / 10 + 1, а не просто 4 ??
index подсчитывает от 0 до 29 автоматически, поскольку ваш $.each(data.brands, function(index, brand){ итерирует. Поэтому нет, он никогда не достигнет 4 (пока не появился 31-й бренд). Дважды проверьте, что вы на самом деле вызовите первый index параметра в этой строке: это будет 1 для первых 10 брендов, затем 2 для следующих 10, затем 3 для финальных 10. Пример на jsfiddle.net/ZVd5X/3 работает для ты?

varun · Answer 2 · 2013-11-28T10-43-00.000Z

Попробуйте что-то вроде этого

 <script type="text/javascript">
    $(document).ready(function () {

        var _licount = 30;
        var _liperul = _licount / 3;

        $('ul').each(function () {

            var str = '';
            for (var i = 0; i < _liperul; i++) {

                str += '<li>Hello</li>';
            }
            $(this).append(str);

        });


    });

</script>

Arun P Johny · Answer 3 · 2013-11-28T09-38-00.000Z

Пытаться

$.getJSON('http://link.to.brands/?format=json', function (data) {
    $.each(data.brands, function (index, brand) {
        $('<li><a href="' + brand.url + '" title="' + brand.title + '">' + brand.title + '</a></li>').appendTo('.block.third .column_' + (Math.floor(index / 10) + 1));
    });
});

Я думаю, что вы имеете в виду по модулю ( % ) 10 в конце там
@ Дерик нет по модулю не так, потому что 5%10 даст 5 не 1, а 5/10 + 1) даст 1
@ Дерик, который также не будет работать, так как 10 % 15 даст 15, нам нужно 2, а ответ Math.floor(15/10) + 1 даст 2
@Deryck все равно спасибо, так как ваши комментарии приводят меня к еще одной ошибке, связанной с полом подразделения
@YuryTarabanko, что будет с Math.ceil(0/10) нам нужно 1

Добавьте каждый 10-й элемент в новый <ul>

3 ответа

Если вы хотите добавить в столбцы: 1, 2, 3, 1, 2, 3, 1, 2, 3,...

Если вы хотите, чтобы первые 10 брендов вошли в столбец_1, следующие 10 в столбец_2,...

Ещё вопросы

Если вы хотите добавить в столбцы: `1, 2, 3, 1, 2, 3, 1, 2, 3,...`