如何使用 jquery 从 html 获取和设置多个值

Question

我想制作一个数组列表，将.productids这个 class 和.quantity这个 class 中的两个值组合起来。 我已经尝试过如下。 但是这个 jquery 的问题是productids class 值推送能够推送每个productids值，但是对于.quantity它总是推送第一个值，即1类似于["47:1","48:1"]但应该类似于那： ["47:1","48:2"] 。

下面是示例代码

 $("#CheckOutBtn").on("click", function () { var paymentMethodId = $("#paymentMethod").val(); var selectAddressId = $("#selectAddress").val(); var data = []; $(".product-row").find(".productids").each(function () { var qty = $(".product-row").find(".quantity"); data.push($(this).val() + ":" + qty.val()); }); console.log(data); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr class="product-row"> <td class="product-col"> <figure class="product-image-container"> <a href="product.html" class="product-image"> <img src="#" alt="product"> </a> </figure> <h2 class="product-title"> <a href="#">Xiaomi Redmi 9a 2/32 price in bangladesh</a> </h2> </td> <td>৳9999.00</td> <td> <input type="hidden" class="productids" value="47"/> <input class="vertical-quantity form-control quantity" value="1" type="text"> </td> <td>৳9999</td> </tr> <tr class="product-action-row"> <td colspan="4" class="clearfix"> <.--<div class="float-left"> <a href="#" class="btn-move">Move to Wishlist</a> </div>--> <.-- End.float-left --> <div class="float-right"> <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a> </div><,-- End.float-right --> </td> </tr> <tr class="product-row"> <td class="product-col"> <figure class="product-image-container"> <a href="product.html" class="product-image"> <img src="#" alt="product"> </a> </figure> <h2 class="product-title"> <a href="#">Xiaomi Radmi note 9 4GB/64GB. Price in Bangladesh</a> </h2> </td> <td>৳19999.00</td> <td> <input type="hidden" class="productids" value="48"/> <input class="vertical-quantity form-control quantity" value="2" type="text"> </td> <td>৳19999</td> </tr> <tr class="product-action-row"> <td colspan="4" class="clearfix"> <!--<div class="float-left"> <a href="#" class="btn-move">Move to Wishlist</a> </div>--> <!-- End .float-left --> <div class="float-right"> <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a> </div><!-- End .float-right --> </td> </tr>

Answer 1

如何循环每个产品行并获取两个值？

$("#CheckOutBtn").on("click", function() {
    var paymentMethodId = $("#paymentMethod").val();
    var selectAddressId = $("#selectAddress").val();

    var data = [];
    $(".product-row").each(function() {
        var pid = $(this).find(".productids").val();
        var qty = $(this).find(".quantity").val();

        data.push(pid + ":" + qty);
    });
    console.log(data);
});