Question

我正在添加一系列选项，但我想让它在9个项目之后转到另一个列。我是否应该有条件地执行此操作，还是应该将它们全部附加，然后使用.wrap获取9？

这是我所拥有的基础知识：

//array going through an each loop, item being a single item in said array

    _(all_topic).uniq().each(function (item) {
                $(".topicContainer").append('<li><input class="filterable-content__criteria" type="checkbox" name="topic" value="' + item + '" id="group3-'+item+'"><i class="hsg-icon hsg-icon-orange-checkmark"></i><label for="group3-'+ item +'">'+ item +'</label></li>')
            });

我应该在那之后立即运行一个功能

var topic_opts = $(".topicContainer li");
for(var i = 0; i < topic_opts.length; i+=9) {
  topic_opts.slice(i, i+9).wrapAll("<ul class="row+i"></ul>");
}

或者有没有办法在附加中使用条件？

Answer 1

也许这可能会对你有所帮助。这将遍历给定的数组并在每第9次迭代时添加（因此9,18，...）。请注意，如果index % 9 == 0，index == 0也将返回true。

$.each(object_array, function( index, value ) {
    if (index % 9 == 0) {
        container.append('<whatever>')
    }
})

Answer 2

您也可以使用nth-child()。

以下示例显示了<li>中的9 <ul>，它附加了第3个项目＆＃39;到列表中的每三个项目。

＆＃13;

$('#list').children('li:nth-child(3n)').append('3rd item');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='list'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

如何每9件物品附加一个新的div？

2 个答案: