【jquery】forの第三引数について

Question

指定数ずつリストを分割したいです。

下記numの指定数ですが、2以外だとうまくいきません。

下記のように2なら2件ずつに分割されるのですが、3や4だとおかしくなります。（たとえば3なら<li>three</li>が消える）

理由と解決策があれば教えていただけませんでしょうか。

<script>
$(function(){
  const li = '<li>one</li>,<li>two</li>,<li>three</li>,<li>four</li>,<li>five</li>';
  const lis = li.split(',').map( x=>$(x) );
  const num = 2; // 2以外でも分割できるようにしたい
  for( let i=0; i<lis.length; i+=num ){
    $('#hoge').append($('<div>').append($('<p>ttl</p>')).append($('<ul>').append( lis[i],lis[i+1])) );
  }
});
</script>

<div id="hoge"></div>

Answer 1

<script>
$(function(){
  const li = '<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>,<li>6</li>,<li>7</li>';
  const lis = li.split(',').map( x=>$(x) );
  const num = 3;
  for( let i=0; i<lis.length; i+=num ){
    $('#hoge').append($('<div>').append($('<p>ttl</p>')).append($('<ul>').append(Array(num).fill(null).map((x,y)=>lis[i+y]))));
  }
});
</script>

<div id="hoge"></div>

Answer 2

append( lis[i],lis[i+1], lis[i+2])))

Answer 3

こんにちは

以下の回答は、 num が変わっても、<ul> にappendする（最大）num個の <li> を作るコードは変えなくてもよいようにするためのものです。

配列lisの部分配列で、開始インデクスがi で要素の数が最大num個となるものを、以下で作成できます。

lis.slice(i, i+num)

上記を <ul> にappendすればよいかと思います。

以下、サンプルです。

• 2個： https://jsfiddle.net/jun68ykt/kc1t3h2a/2/

　　

• 3個： https://jsfiddle.net/jun68ykt/kc1t3h2a/3/

　　

• 4個： https://jsfiddle.net/jun68ykt/kc1t3h2a/4/

　

• num の初期値は1で、1ずつ増える： https://jsfiddle.net/jun68ykt/kc1t3h2a/5/

以上参考になれば幸いです。