jquery 更改同一表行中标签的更改事件值

Question

我有一个像这样的表:

<table>
  <tbody>
    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value
        <input type="hidden" value="Some value" class="hiddenName" />
      </td>
    </tr>

    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value 2 
        <input type="hidden" value="Some value 2" class="hiddenName" />
      </td>
    </tr>
  </tbody>
</table>

我想要做的是，当带有类标识符的输入更改其值时，我想将同一行中类“名称”列中的文本设置为“设置值”和 hiddenName 值也改为“设置值”

因此，例如，如果更改了具有类标识符的第二行输入，我希望将标记更改为:

<table>
  <tbody>
    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value
        <input type="hidden value="Some value" class="hiddenName" />
      </td>
    </tr>

    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Set value 
        <input type="hidden value="Set value" class="hiddenName" />
      </td>
    </tr>
  </tbody>
</table>

所以我想到的 jquery 是:

$('.identifier').change(function () {

    var row = $(this).parent("tr");
    row.find('.hiddenName').val("Set value");
     row.find('.name').text("Set value");
});

但是这根本不起作用。

有谁知道我做错了什么以及如何解决？

Answer 1

$('.identifier').change(function () {
  var $td = $(this).parent().next(".name");
  $td.text("SetValue");
  $td.find(".hiddenName").val("SetValue");
});

Fiddle .

编辑:在您的上次更新中，问题是 parent 仅在 DOM 树上向上移动一个级别，并且从 input 到td到tr，有两个级别。按照@undefined 的建议，使用 closest 代替，它将继续向上移动直到找到匹配项，并且它应该可以工作，尽管上面的方法更快:

$('.identifier').change(function () {
    var row = $(this).closest("tr");
    row.find('.hiddenName').val("Set value");
    row.find('.name').text("Set value");
});

Fiddle .