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

Question

我有一个相当大的表格：

<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 语句。

我想伪代码的一个很好的例子是

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：添加截图

Answer 1

您可以将$.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