当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery .each for dynamic multiple values

问题描述:

Please help me to solve my problem. The code below works correctly, but the problem is that data is taken only from the first iteration. How do I make it work for everyone? Thank you in advance, I apologize if the question is very stupid.

<tbody><tr class="tr_cart_1">

<input type="hidden" value="1" id="item_id_cart">

<td data-th="Product">

<div class="row">

<div class="col-sm-2 hidden-xs"><img

src="..." width="100" height="100" alt="..."

class="img-responsive" /></div>

<div class="col-sm-10">

<h4 class="nomargin">...</h4>

<p>...</p>

</div>

</div>

</td>

<td data-th="Price"><span id="price_cart">123</span></td>

<td data-th="Quantity">

<form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div>

<input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

</td>

<td data-th="Subtotal" class="text-center">

<span class="sum_cart" id="id_sum_cart_1">246</span>

</td>

<td class="actions" data-th="">

<button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>

<button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>

</td>

</tr><tr class="tr_cart_3">

<input type="hidden" value="3" id="item_id_cart">

<td data-th="Product">

<div class="row">

<div class="col-sm-2 hidden-xs"><img

src="..." width="100" height="100" alt="..."

class="img-responsive" /></div>

<div class="col-sm-10">

<h4 class="nomargin">...</h4>

<p>...</p>

</div>

</div>

</td>

<td data-th="Price"><span id="price_cart">30</span></td>

<td data-th="Quantity">

<form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>

<input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

</td>

<td data-th="Subtotal" class="text-center">

<span class="sum_cart" id="id_sum_cart_3">60</span>

</td>

<td class="actions" data-th="">

<button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>

<button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>

</td>

</tr><tr class="tr_cart_2">

<input type="hidden" value="2" id="item_id_cart">

<td data-th="Product">

<div class="row">

<div class="col-sm-2 hidden-xs"><img

src="..." width="100" height="100" alt="..."

class="img-responsive" /></div>

<div class="col-sm-10">

<h4 class="nomargin">...</h4>

<p></p>

</div>

</div>

</td>

<td data-th="Price"><span id="price_cart">30</span></td>

<td data-th="Quantity">

<form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>

<input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

</td>

<td data-th="Subtotal" class="text-center">

<span class="sum_cart" id="id_sum_cart_2">60</span>

</td>

<td class="actions" data-th="">

<button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>

<button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>

</td>

</tr></tbody>

$(document).on("click", "#ref_cart_btn", function() {

$( '[class*="tr_cart_"]' ).each(function(i) {

var item_id_cart = $("#item_id_cart").attr('value');

var qty = $("#qty_cart").val();

alert (qty);

var price = $("#price_cart").text();

alert (price);

alert(item_id_cart);

$("#id_sum_cart_" + item_id_cart).text(qty*price);

});

});

网友答案:

Your mistake is inside the HTML.

The ID is the unique identifier as described in MDN while you repeated the same ID for more than one element.

In this case you need to change the IDs so that they will have to be different like for the element id_sum_cart_

A simple solution to your problem can be to get each element looking inside the current set:

$(document).on("click", "#ref_cart_btn", function() {
  $('tr[class^="tr_cart_"]').each(function(index, element ) {
    var item_id_cart = $(this).find('input[type="hidden"][id="item_id_cart"]').val();
    var qty = $(this).find('input[type="text"][id="qty_cart"]').val();
    var price = $(this).find('span[id="price_cart"]').text();
    alert ('item_id_cart: ' + item_id_cart + ' qty: ' + qty + ' price: ' + price);
    $("#id_sum_cart_" + item_id_cart).text(qty*price);
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="ref_cart_btn">Button</button>
<table>
    <tbody>
    <tr class="tr_cart_1">
        <input type="hidden" value="1" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">123</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_1">246</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_3">
        <input type="hidden" value="3" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p>...</p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_3">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    <tr class="tr_cart_2">
        <input type="hidden" value="2" id="item_id_cart">
        <td data-th="Product">
            <div class="row">
                <div class="col-sm-2 hidden-xs"><img
                        src="..." width="100" height="100" alt="..."
                        class="img-responsive"/></div>
                <div class="col-sm-10">
                    <h4 class="nomargin">...</h4>

                    <p></p>
                </div>
            </div>
        </td>
        <td data-th="Price"><span id="price_cart">30</span></td>
        <td data-th="Quantity">
            <form action="" method="post" name="refresh" class="text-center">
                <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div>
                <input id="qty_cart" name="qty" size="2" type="text" value="2"></form>

        </td>
        <td data-th="Subtotal" class="text-center">
            <span class="sum_cart" id="id_sum_cart_2">60</span>
        </td>
        <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button>
            <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button>
        </td>
    </tr>
    </tbody>
</table>
分享给朋友:
您可能感兴趣的文章:
随机阅读: