9個のアイテムごとに新しいdivに追加するにはどうすればよいですか？

Question

オプションの配列を追加していますが、9個の項目の後に別の列に移動します。私はこれを条件付きで行うべきですか、それともすべてを追加するべきですか？次に.wrapを9に使用しますか？

これは私が持っているものの基本である：それは

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>"); 
} 

または私はこれで操作を行うことができる方法があると言う直後

//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>') 
      }); 

---

私は、関数を実行している必要があります条件付きを使用して追加？

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()を使用することもできます。

以下の例は、<ul>の9 <li>を示しています。リストの3番目の項目すべてに「3番目の項目」を追加します。

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

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