关于js数组赋值问题？

var arr = [];

var i = 1;
$(".image-container_div").each(function (index, value) {
  arr[$(this).attr("data-id")][i] = {"url":$(this).children(":first-child").attr("src") , "name":$.trim($(this).children("input").val())};
  i++;
})

<div class='image-container_div' data-id="1">
    <img src="1111">
    <input type="text" value="111">
</div>
<div class='image-container_div' data-id="1">
    <img src="2222">
    <input type="text" value="222">
</div>
<div class='image-container_div' data-id="2">
    <img src="3333">
    <input type="text" value="333">
</div>
<div class='image-container_div' data-id="2">
    <img src="4444">
    <input type="text" value="444">
</div>

我页面的html代码如上，想通过循环image-container_div，获取下面的img的src和input的value值，然后通过div中的data-id作为数组键值来分，想得到的结果如下

array(
    1 => array(
        array("url"=>1111,"name":111),
        array("url"=>2222,"name":222),
    ),
    2 => array(
        array("url"=>3333,"name":333),
        array("url"=>4444,"name":444),
    )
)

我应该如何修改上面的js代码获得这个结果？