jQuery、JSでulでグループ分けされたli>inputの値を二次元配列として格納

Question

こんにちは、いつもありがとうございます。
文が下手でタイトルからは分かりにくいかもしれませんが、
この下のようなHTMLからinputの値をそれぞれul毎に分けて取得し二次元配列にしたいです。

<ul class='question-list'>
	<li>
		<div class="choice">
			<ul class="list">
				<li><input type="radio" name="1" value="0001">></li>
				<li><input type="radio" name="1" value="0002">></li>
				<li><input type="radio" name="1" value="0003">></li>
				<li><input type="radio" name="1" value="0004">></li>
			</ul>
		</div>
	</li>
	<li>
		<div class="choice">
			<ul class="list">
				<li><input type="radio" name="2" value="0007">></li>
				<li><input type="radio" name="2" value="0008">></li>
				<li><input type="radio" name="2" value="0009">></li>
				<li><input type="radio" name="2" value="0010">></li>
			</ul>
		</div>
	</li>
	<li>
		<div class="choice">
			<ul class="list">
				<li><input type="radio" name="3" value="0015">></li>
				<li><input type="radio" name="3" value="0016">></li>
			</ul>
		</div>
	</li>
</ul>

selectionの中身を、

selection = [
[0001,0002,0003,0004],
[0007,0008,0009,0010],
[0015,0016],
]

のようにしたいのですが、下のコードだとhtml内のすべてのliの値を取得した後、
count++が実行され、ulごとに二次元配列が作れないです。

var selection = [];
var count = 0;

$("ul.list").each(function(){
		$("li > input[type=radio]").each(function(){ 
			selection[count] = [$(this).val()];
		})
		count++;
})

初心者でよくわかっていない部分が多いので、何か大間違いをしているかもしれません。。
どうかご教授願います。

Answer 1

以下のようにしてみてはいかがでしょうか。

$(function(){
    var selection = [];
    var count = 0;

    $("ul.list").each(function(){
        var arr = [];
        $(this).find("li > input[type=radio]").each(function(){
            arr.push($(this).val());
        })
        selection[count] = arr;
        count++;
    });
});

以下検証

jQuery、JSでulでグループ分けされたli>inputの値を二次元配列として格納　検証

Comments

[orange0190]

解説が必要ならコメントください。

[Tats.N]

できました！本当にありがとうございます！

[coba-coba]

参考までに、map()を使うともう少しきれいに書けます。

$(function(){
var selection = [];
$(".list").each(function(){
selection.push(
$(this).find("input[type=radio]").map(function(){
return $(this).val();
}).get()
)
});