Question

当我点击ordersconfirm按钮时。

正在形成的输出是

[
    {
        "toppings": [
            {
                "name": "Quantity      1",
                "value": [
                    "Honey with Chocolate Sauce  10 ML",
                    "Honey with Carmel  10 ML"
                ]
            }
        ],
        "crusts": []
    }
]

我无法找出为什么地壳阵列是空的

这是我的jsfiddle

http://jsfiddle.net/N2ymz/

用于结壳阵列形成的代码是

     $(this).closest('.prd-items-detials').next('.Crust-details').find('.tdHeading').each(function () {
        values = [];
        $(this).parent().find('.tpActive').each(function () {
            values.push($(this).text().trim());
        });
        if(values.length>0)
        {
            crusts.push({
                'name': $(this).text().trim(),
                'value': values
            });
        }
    });

这是HTML部分

<div id="myordersdiv" style="display: block;">
   <ul>
      <li class="myorderhead active">
         <h5>
            My Orders
            <i class="myorderhead22">1</i>
         </h5>
      </li>
      <div id="ordersdiv">
         <div id="addtoordersdiv4">
            <div class="prd-items-detials">
               <ul>
                  <li class="head">
                     <form>
                        <label item_id_itr_some="label4" class="testtt" for="checkbox-mini-0">Popcorn Plain salted</label>
                     </form>
                  </li>
                  <li class="prd-items-qt">
                  </li>
               </ul>
            </div>
            <div style="display: block;" class="Topping-details" id="4">
               <section id="topping_tsection_4">
                  <aside>
                     <h6 class="tdHeading">Quantity      1</h6>

                     <section class="secclass"><a  topping_id="1"  topp_name="Honey with Chocolate Sauce  10 ML" top_price="25" class="tpActive" qt_val="4_ZZ_0_ZZ_0">Honey with Chocolate Sauce  10 ML</a>
                     </section>

                     <section class="secclass"><a  topping_id="2"  topp_name="Honey with Carmel  10 ML" top_price="25" class="tpActive" qt_val="4_ZZ_0_ZZ_1">Honey with Carmel  10 ML</a>
                     </section>

                  </aside>
               </section>
            </div>
            <div style="display: block;" class="Crust-details" id="4">
               <section id="crust_tsection_4">
                  <aside>
                     <h6 class="tdHeading">Quantity      1</h6>

                     <section class="crustsecclass"><a  crust_id="7"  crust_name="Honey with Chocolate Sauce  20 ML" crust_cost="25" class="tpActive">Honey with Chocolate Sauce  20 ML</a>
                     </section>

                     <section class="crustsecclass"><a data-id="4" crust_id="8"  crust_name="Honey with Carmel  20 MLRs 30" crust_cost="25" class="tpActive" >Honey with Carmel  20 MLRs 30</a>
                     </section>

                  </aside>
               </section>
            </div>
         </div>
      </div>
   </ul>
</div>
<input type="button" id="ordersconfirm" value="Submit Orders">

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

Answer 1

首先，这里没有Crust-details -

$(this).closest('.prd-items-detials').next('.Crust-details') // line 20

因为next()期望下一个兄弟拥有该类（“获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了一个选择器，它只检索下一个兄弟如果它匹配那个选择器。“），但它没有。您需要使用nextAll()（“获取匹配元素集中每个元素的所有后续兄弟，可选择通过选择器进行过滤。”）

$(this).closest('.prd-items-detials').nextAll('.Crust-details')

http://jsfiddle.net/jayblanchard/N2ymz/4/ http://api.jquery.com/nextAll/

Answer 2

找到它。。在第3行，你宣布了地壳对象。

var crusts = [];

并且基于第34行的条件，没有推送任何值。然后在第43行的最终产品对象中推送空对象

products.push({
           'toppings': toppings,
            'crusts': crusts
        });

使用条件来避免这种情况：

if(crusts.length > 0){
            products.push({
               'toppings': toppings,
                'crusts': crusts
            });
        }
        else
        {
            products.push({
               'toppings': toppings
            });
        }

Update JS Fiddle

为什么在这种情况下形成空

2 个答案: