关于js数组赋值问题？

Question

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代码获得这个结果？

Answer 1

$(".image-container_div").each(function (index, value) {
    let $this = $(this)
    let id = $this.attr("data-id")
    let res = arr[id] || (arr[id] = [])
    res.push({
        url: $this.find("img").attr("src"),
        name: $this.find("input").val().trim()
    })
})

Answer 2

let arr = [[],[]]
$(".image-container_div").each(function (index, value) {
    let that = $(value)
    let item = [{url: that.children('img').attr('src'), name: that.children('input').attr('value')}]
    if (that.attr('data-id') === '1') {
      arr[0].push(item)
    } else if (that.attr('data-id') === '2') {
      arr[1].push(item)
    }
})
console.log(arr)