【jquery】複数リストを指定数ごとに分割して、要素の中に分けたい

Question

###実現したいこと
このように不定数ある<li>を2件ずつに分けて、<ul>の中に詰め込みたいです。
const li = '<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>';

↓ 具体的には上を、以下のように出力したいです。

  
<div>
    <p>ttl</p>
    <ul>
        <li>1</li><li>2</li>
    </ul>
</div>  
<div>
    <p>ttl</p>  
    <ul>
        <li>3</li><li>4</li>
    </ul>
</div>  
<div>    
    <p>ttl</p>  
    <ul>
        <li>5</li>
    </ul>
  </div>

###試したこと
下記コードのサンプルです。
なんとかここまで書いてみたものの、TypeError: context is undefinedのエラーが出たり、<li>を2件ずつに分ける方法がイマイチわからなかったり、とても苦戦しています。

もしよかったら、どうすれば実現できるか教えて頂けませんでしょうか。

// liの外側を作る（できればこの関数は変えたくないです）
function ulArrGet( num ){
	let ulArr = [];
	for (let i=0; i<num; i++) {
		ulArr.push( '<div><p>ttl</p><ul></ul></div>' );
	}
	return ulArr;
}

// liの外側を取得
const li = '<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>';
const liArr = li.split(',');
const num = liArr.length;
let ulArr = ulArrGet( Math.ceil( num/2 ) );

// liを2件ずつ取得
let li2 = [];
$(liArr).each(function(index, element) {
	li2.push( $(this) );
	$(ulArr).html( li2 ); 
});

// 出力
$('body').html( ulArr );

※できればfunction ulArrGet( num ){}という関数は変えずにやりたい、と思っているのですが、できますでしょうか。

Answer 1

<script>
$(function(){
  const li = '<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>';
  const lis=li.split(',').map(x=>$(x));
  for(var i=0;i<lis.length;i+=2){
    $('#hoge').append($('<div>').append($('<p>ttl</p>')).append($('<ul>').append(lis[i],lis[i+1])));
  }
});
</script>
<div id="hoge"></div>

追記

ちょっとどういうこだわりなのか意図が伝わってきませんが
ulArrGet()がマストだということなので

<script>
$(function(){
  const li = '<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>';
  const liArr = li.split(',');
  const num = liArr.length;
  let ulArr = ulArrGet( Math.ceil( num/2 ) ); 
  ulArr.forEach(function(x){
    $(x).appendTo($('#hoge'));
  });
  $('#hoge>div').each(function(x){
    $(this).find('ul').append($(liArr[x*2]),$(liArr[x*2+1]));
  });
});
function ulArrGet( num ){
    let ulArr = [];
    for (let i=0; i<num; i++) {
        ulArr.push( '<div><p>ttl</p><ul></ul></div>' );
    }
    return ulArr;
}
</script>
<div id="hoge"></div>

Comments

[marimon]

効率の良い方法をありがとうございます。

'<div><p>ttl</p><ul></ul></div>' の要素たちを、<li>を分割するループとは別の独立した関数で生成したかったので、

そこで、次のようにアレンジしてみたのですが…、できず。
https://jsfiddle.net/e0mvofhw/

コメントアウトしてある「// ここがうまくいかない? 」のあたりが問題かと思うのですが、解決する方法はございませんでしょうか？すみませんせっかく書いてくださったのに。

[yambejp]

ulArrGet()対応版も念の為あげておきました

[marimon]

対応版！ありがとうございます。ニアミスで上のコメント編集してしまいましたが、気にしないでください。どうもありがとうございます！

「>どういうこだわりなの？」という話ですが、ulArrGet() は他で使っている関数なのでこのまま使いまわしたかった、というこだわりでした。