javascript - 如何使用 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 中，价格 位于具有类 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 
    });
});

请在必要时相应地更改类，以根据您的数据所在位置获取信息。

附言你打错了detials，我想你是在寻找details。