Question

这是我作为回复获得的HTML

 <div id="ordersdiv">

   <div id="addtoordersdiv68">
      <div class="product-item">
        <ul>
         <form>
            <label  for="checkbox">Strawberry</label>
         </form>
          <ul>
      </div>
      <div class="Topping-details" id="68" style="display: block;"></div>
   </div>

   <div id="addtoordersdiv69">
      <div class="product-item">
         <ul>
         <form>
            <label  for="checkbox">Chocolate</label>
         </form>
          <ul>
      </div>
      <div class="Topping-details" id="69" style="display: block;">
         <section id="topping_tsection_69">
            <i id="topping-close"></i>
            <aside>
               <h6 class="tdHeading">Chocolate0</h6>
               <img src="images/arrow-topping.png">
               <section class="secclass"><a class="tpActive">Honey Sauce  10 ML</a></section>
               <section class="secclass"><a class="tpActive">Caramel Sauce  10 ML</a></section>
               <section class="secclass"><a>Nutts and dry fruits10 gm</a></section>
            </aside>
            <aside>
               <h6 class="tdHeading">Chocolate1</h6>
               <section class="secclass"><a>Honey Sauce  10 ML</a></section>
               <section class="secclass"><a class="tpActive">Honey with Carmel  10 ML</a></section>
               <section class="secclass"><a>Nutts and dry fruits10 gm</a></section>
            </aside>
         </section>
      </div>
   </div>

</div>

我需要解析属于 product-item 的每个div类，捕获标签文本，然后进一步循环遍历class Topping-details < / strong> div存在于此中，并且仅捕获 h6 及其对应的一个标记类 tpActive ，以便输出看起来像这样方式（对于上述数据）

[ { "name": "Chocolate", "toppings": [ { "name": "Chocolate0", "value": [ "Honey Sauce 10 ML", "Caramel Sauce 10 ML" ] }, { "name": "Chocolate1", "value": [ "Honey with Carmel 10 ML" ] } ] } ]

我试图用这种方式实现同样的目标

var divdata = { data: [] }; var tvalue ; var tname ; $(document).ready(function() { $.each($('#ordersdiv ul'), function(i, elem) { name = $(elem).find("label").text(); if (name != 'undefined' && name!='') { tvalue = $(elem).find(".tpActive").text(); tname = $(elem).find("h6").text(); var toppings = []; var toppactive= []; toppactive.push(tvalue); toppings.push( { "name": tname, "value": toppactive }); divdata.data.push({ "name": name, "toppings":toppings }); } }); console.log(JSON.stringify(divdata.data)); });

但我的输出是

[{"name":"Strawberry","toppings":[{"name":"","value":[""]}]},{"name":"Chocolate","toppings":[{"name":"","value":[""]}]}]

这是我的jsfiddle

http://jsfiddle.net/vv6GQ/2/

任何人都可以帮我解决这个问题吗？

Answer 1

<强>解决方案

var name;
var values = [];
var toppings = [];
var products = [];

//Iterating through the ul
$.each($('#ordersdiv ul'), function (i, elem) {
    name = $(elem).find("label").text();
    toppings = [];

    //In the assuption that child of chocolate contains chocolate* (like chocolate1, chocolate2, etc.)
    $('.Topping-details .tdHeading:contains("' + name + '")').each(function () {
        values = [];

        $(this).parent().find('.tpActive a').each(function () {
            //Creating values array
            values.push($(this).text());
        });

        //Creating topping array
        toppings.push({
            'name': $(this).text(), 
            'value': values
        });
    });
    //Creating product array 
    products.push({
        'name': $.trim($(this).text()), 
        'toppings': toppings
    });
});

console.log(products);

<强>结果

[{
    "name": "Strawberry",
    "toppings": []
}, {
    "name": "Chocolate",
    "toppings": [{
        "name": "Chocolate0",
        "value": ["Honey Sauce  10 ML", "Caramel Sauce  10 ML"]
    }, {
        "name": "Chocolate1",
        "value": ["Honey with Carmel  10 ML"]
    }]
}]

JSFiddle

如何在javascript中创建嵌套数组

1 个答案: