странная проблема с методом 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+"%");
        }
    });
});

У меня есть две строки на странице (после цикла). первый имеет идентификатор «2», а второй - «3».

Проблема в том, что когда я изменяю поле шагов во второй строке (также может быть первой строкой) и фокусируюсь, тогда в предупреждении отображается «3», но значение в поле «steps_ratio» изменилось для ОБА строк ...

Почему это не изменилось только для 'steps_ratio', которое под id '3'?

Спасибо

Answer 1

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

должно быть

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

.parents() возвращает все родительские элементы на всем протяжении дерева, .parent() возвращает только непосредственного родителя.

Кроме того, на странице не должно быть нескольких элементов с одинаковым идентификатором.