jquery .find() 方法的奇怪问题

Question

我的 .find() 方法有一个奇怪的问题。

我有以下 html：

<table id="roleTab" style="padding: 5px; position: relative; top: 10px">
<thead>
    ....
</thead>
<tbody>
<TMPL_LOOP DATA_ROLES>
    <tr id="<TMPL_VAR ID>">
        <td><select id="role2" name="role2_<TMPL_VAR ID>" title="The role of the employee"><TMPL_VAR ROLE></select></td>
        <td><input id="steps" type="text" name="steps_<TMPL_VAR ID>" size="5" title="Total amount of steps per month" value="<TMPL_VAR STEP>"></td>
        <td><input id="measurable_steps" type="text" name="measurable_steps_<TMPL_VAR ID>" title="Measurable steps" value="<TMPL_VAR MEASURABLE_STEP>"></td>
        <td><input id="steps_ratio" type="text" name="steps_ratio_<TMPL_VAR ID>" title="'Measurable steps' / 'Steps'" value="<TMPL_VAR STEPS_RATIO>%" readonly></td>
        <td style="text-align: center"><select id="reopen_rate" name="reopen_rate_<TMPL_VAR ID>" title="How many reopenes after closing the SI"><TMPL_VAR REOPEN></select></td>
        <td><select id="w4p" name="w4p_<TMPL_VAR ID>"><TMPL_VAR W4P></select></td>
        <td><select id="team" name="team2_<TMPL_VAR ID>"><TMPL_VAR TEAM></select></td>
        <td><input id="checkbox" type=checkbox></td>
        <td><input id="status2" type="hidden" name="status2_<TMPL_VAR ID>" value="<TMPL_VAR STATUS>"></td>
    </tr>
</TMPL_LOOP>
</tbody>
</table>

我有以下脚本：

$(function(){
    $('#steps').live("focusout", function() {
        var steps = $(this).parents().parents().find('#steps').attr("value");
        var meas_steps = $(this).parents().parents().find('#measurable_steps').attr("value");
        var value = (meas_steps/steps)*100;
        value = parseInt(value);
        if(steps && meas_steps){
            var t = $(this).parents().parents().attr("id");////////////////////
            alert(t);////////////////////////////////////////////////////////////
            $(this).parents().parents().find('#steps_ratio').attr("value", value+"%");
        }
    });
});

页面上有两行（遵循循环）。 第一个的 ID 为“2”，第二个的 ID 为“3”。

问题是当我更改第二行中的步骤字段（也可以是第一行）并聚焦时，警报显示“3”，但两行的“steps_ratio”字段中的值都发生了变化......

为什么不'它只改变了 id '3' 下的 'steps_ratio' 吗？

谢谢

Answer 1

$(this).parents().parents()

应该是

$(this).parent().parent()

.parents() 返回树上一直向上的所有父元素，.parent() 仅返回直接父元素。

另外，页面中不应有多个具有相同 ID 的元素。