如何使用div数据创建JSON数组

Question

在myordersdiv里面，我把所有这些都附加在div上。

<div data-role="collapsible">
   <div class="prd-items-detials">
      <ul>
         <li class="head">
            <form><label class="testtt" for="checkbox-mini-0">' + itemname + '</label></form>
         </li>
         <li class="prd-items-qt">
            <div class="col"><span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40"  src="' + image + '"/><span></div>
            <div class="col"><i class="minus" id_attr="' + id_attr_val + '"></i><i class="qt qt_' + id_attr_val + '" id_attr="' + id_attr_val + '">1</i><i class="plus" id_attr="' + id_attr_val + '"></i></div>
            <div class="col"><a href="#" class="btn btn-sm">Topping</a></div>
            <div style="display: none;" class="price" id_attr="' + id_attr_val + '">' + price + '</div>
            <div class="col total total_' + id_attr_val + '" id_attr="' + id_attr_val + '">' + price + '</div>
         </li>
      </ul>
   </div>
</div>

HTML部分。

 <div id="myordersdiv">
 </div>

点击确认订单按钮，我需要以下面的格式获取该div中存在的所有图像及其相应的数量和价格

var divdata = '{"data": [{"name": "JSON_images/popcorn.jpg","quan":"1","price":"50"},{"name": "JSON_images/icecream_cup.jpg","quan":"2","price":"100"}]}';

现在我能够获得该div下的所有图像。

$(document).on("click", ".btn-confirmorder", function () {
   var imagedata = $("#myordersdiv").find('img').map(function(){
    return $(this).attr('src')
}).get()

屏幕看起来就是这样。

我已经看到了创建JSON数组的逻辑：

var divdata = {
    data: []
};

for(var i in someData) {

    var item = someData[i];

    divdata.data.push({ 
        "image" : item.firstName,
        "price"  : item.lastName,
        "quantity"     : item.age 
    });
}

请告诉我怎样才能在听众面前做这一切？

Answer 1

我无法确定哪些元素具有什么，所以为了显示算法，我将使用： quantity 在具有类quantity的div中， price 位于具有类total的div中，并且每个元素都在其自己的prd-items-detials类div中。

var divdata = {
     data: []
};    
var price, quantity, name;

// Iterate through each element
$.each($('.prd-items-detials'), function(i, elem) {
    price = $(elem).find('.total').html(); // The price is the inner HTML of the DIV with class 'total'
    quantity = $(elem).find('.quantity').html(); // The quantity is the inner HTML of the DIV with class 'quantity'
    name = $(elem).find('img').attr('src'); // The name is the 'src' attribute of the image

    divdata.data.push({ 
         "image": name,
         "price": price,
         "quantity": quantity 
    });
});

请根据需要更改相应的课程，以根据数据的位置获取信息。

P.S。您使用 detials 打了一个错字，我认为您正在寻找详细信息。