将每个第10个元素添加到新的<ul> </ul>

Question

我有一些来自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块。所以我认为我的方法是错误的。 我该怎么做呢。有些解释更受欢迎！

Answer 1

尝试

$.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));
    });
});

Answer 2

如果要附加到列：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个品牌进入column_1，接下来的10个进入column_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变量。

Answer 3

尝试这样的事情

 <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>