如何在这个表单中使用jQuery .each()?

时间:2013-08-02 18:11:36

标签: jquery forms loops each

我有一个相当大的形式:

<table id="form_table">
    <tr class="table_headers">
        <th>Sources (sorted alphabetically)</th>
        <th>Max $$ Allowed</th>
        <th>You Suggest...</th>
        <th>Warning</th>
        <th>Who Pays This?</th>
        <th>How Much do They Pay?</th>
        <th>How do They Pay?</th>
        <th>Meaning...</th>
    </tr> 
    <tr>
        <td class="label"><p>Borrowed Money (Debt from Bonds)</p></td>
        <td class="max_amount" id="b1"><p>36</p></td>
        <td class="usr_amount"><input type="text" name="c1" class="usrAmts" /></td>
        <td class="warning"><p id="d1"></p></td>
        <td class="paid_by"><p>Property Owners (Property Tax)</p></td>
        <td class="paid_amount"><p id="f1" class="paidAmts"></p></td>
        <td class="paid_how"><p>property tax rate per year</p></td>
        <td class="meaning"><p><span id="h1"></span> per year on a $210,000 house</p></td>
    </tr>
    <tr>
        <td class="label"><p>Business Licenses</p></td>
        <td class="max_amount" id="b2"><p>25</p></td>
        <td class="usr_amount"><input type="text"  name="c2" class="usrAmts" /></td>
        <td class="warning"><p id="d2"></p></td>
        <td class="paid_by"><p>Business Owners' Customers</p></td>
        <td class="paid_amount"><p id="f2" class="paidAmts"></p></td>
        <td class="paid_how"><p>per employee per year</p></td>
        <td class="meaning"><p></p></td>
    </tr>
</table>

我想要做的是使用jQuery .each(),以便我可以提醒用户他的输入是否高于<td class="max_amount">中的值,而不必写一堆if语句。 / p>

我猜伪代码的一个好例子是

for (i = 0; i <= 10; i++)
   if ($('#usr_input[i]').val() > $('#max_val[i]').val())
      $('span#[i]').text('too high!');

或类似的东西。我真的不知道如何把它说成文字。如果写得不好,我会道歉,如果被问到可以提供更多细节。

我可以用.each()执行此操作,还是必须写出所有if语句?

编辑1:我修改了我的HTML(上面),然后尝试了这个:

$('[id^=usr_input]').each(function(i) {
    $(this).on('change', function() {
        if ($(this).val() > $('#b'+ i).val()) {
            $('p#d'+ i).text('too high!');
        }
    });
});

没有运气。

编辑2:改为:

$('[id^=c]').each(function(i) {
    $(this).on('change', function() {
        if ($(this).val() > $('#b'+ i).val()) {
            $('p#d'+ i).text('too high!');
        }
    });
});

我将[id^=c]用于input id

编辑3:添加了截图 Goal

1 个答案:

答案 0 :(得分:3)

您可以将$.each与选择器

一起使用
$('[id^=usr_input]').each(function(i) {
    if ($(this).val() > $('#max_val'+ i +']').val())
       $('span#f['+ i +' ]').text('too high!');
});

您需要附加i

的值

如果您的inputs ID为'max_val1','max_val2'等等,那么

更新

您首先不需要使用ID's。您可以使用closest迭代相关元素并获取功能。

// This is where users enter the Amount
// To access value from input you use .val()
// To access value from elements that are not input 
//  you use .text();
$('.usrAmts').on('change', function () {
    // The input that triggered the change
    var $this = $(this),
        // Closest row for input
        // Need this as you want to find the other elements inside 
        // the particular row.
        $row = $(this).closest('tr'),
        // Find the p tag inside the max amount
        // need to use text as it is not input
        $max = $row.find('.max_amount p'),
        // warning class that holds error
        $err = $row.find('.warning p');

    if ($(this).val() > parseFloat( $max.text()))  {
        $err.text('too high!');
    } else {
        $err.text('');
    }
});

<强> Check Fiddle