Comment créer un tableau JSON avec les données div

Question

A l'intérieur de myordersdiv, j'ai ajouté tout ce qui suit à la 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> 

Section HTML.

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

Sur un simple clic de Confirmer la commande Bouton, je dois obtenir toutes les images et la quantité correspondante et le prix actuel dans ce div, en dessous le format

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

je suis maintenant en mesure de obtenir toutes les images présentes sous cette div.

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

L'écran ressemble à ceci.

J'ai vu cette logique pour créer un tableau 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 
    }); 
} 

s'il vous plaît me dire comment puis-je faire tout cela sous l'auditeur ??

Answer 1

Je ne peux pas vraiment comprendre quels éléments tient ce, donc dans l'intérêt d'afficher l'algorithme, je partirai avec: quantité est dans une div ayant la classe quantity, le prix est dans un div ayant la classe total et chaque élément est dans son propre prd-items-detials classe 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 
    }); 
}); 

Veuillez modifier les classes en conséquence si nécessaire pour obtenir l'information en fonction de l'emplacement de vos données.

P.S. Vous avez fait une faute de frappe avec detials, je pense que vous cherchiez détails.