javascript - jquery计算同一类不同元素的不同值

Question

我有这个代码:

<script type="text/javascript">
    $("#run").click(function(){
        var prc = $('.hprc').html();
        var mval = '0.1';
        $('.vprc').html('$'+(prc * mval));
    });
</script>
<table id="form1" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td>
                <div class="col_label">Col1</div>
            </td>
            <td>
                <div class="col_label">col2</div>
            </td>
        <tr>
            <td>
                <input class='pos1' lid1='243' lid2='0' type='checkbox' /><label class='main_cb'>Name1</label>
            </td>
            <td>
                <div class='prc'><div class='hprc'>15.00</div>
                <div class='vprc'>$0</div></div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width='100%' class='block1' cellpadding='0' cellspacing='0' border='1'>
                    <tr>
                        <td>
                            <input class='pos2' lid1='1' lid2='0' pval='1.00' type='checkbox' /><label class='sec_cb'>Name2</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>1.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class='pos3' lid1='0' lid2='2401' pval='22.00' type='checkbox' /><label class='sec_cb'>Name3</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>22.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <input class='pos4' lid1='243' lid2='0' type='checkbox' /><label class='main_cb'>Name4</label>
            </td>
            <td>
                <div class='prc'><div class='hprc'>7.00</div><div class='vprc'>$0</div></div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width='100%' class='block2' cellpadding='0' cellspacing='0' border='1'>
                    <tr>
                        <td>
                            <input class='pos5' lid1='193' lid2='0' pval='9.00' type='checkbox' /><label class='sec_cb'>Name5</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>9.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class='pos6' lid2='1737' lid1='0' pval='19.00' type='checkbox' /><label class='sec_cb'>Name6</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>19.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <input type='button' value='calc' id='run'/>

该表是通过 php 生成的，其 cont 的计数可能会有所不同。

我正在尝试使用 jquery 在每一行上计算类 'hprc' * '0.1' 的值。

它只计算第一行，然后为其余部分复制第一个结果。

修改表的结构或以不同方式命名类不是一种选择。

如何为每一行应用公式？

Answer 1

你可以使用

// for each item with class prc (the containers)
$('.prc').each(function(){
   var self = $(this),
       mval = 0.1,
       hprc = parseFloat(self.find('.hprc').text()), // get the value of the .hprc element and convert to float number
       vprc = self.find('.vprc');
   vprc.text('$' + (hprc*mval)); // store the result 
});

由于您处理的是价格，因此您还可以在计算后添加 .toFixed(2) 以四舍五入为 2 位小数。

vprc.text('$' + (hprc*mval).toFixed(2));

演示在 http://jsfiddle.net/gaby/uFjQc/