javascript - 查询 : Get div defined in same table row

Question

我有一个使用 MVC 应用程序动态创建的 HTML 表，表的输出如下所示:

在编辑按钮的 onclick 事件中，我想使用 jQuery 显示 divText 并隐藏同一行的 divLabel。

我已尝试获取 divLabel，如下所示:

function EditRecord(elem) {
  var divlabel = $(elem).closest('tr').children('td div#divLabel');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div id="divLabel">
        value 1
      </div>
      <div id="divText" style="display: none">
        <input type="text" value="value 1" />
      </div>
    </td>
    <td>
      <input type="button" value="edit" onclick="EditRecord(this);" />
    </td>
  </tr>
  <tr>
    <td>
      <div id="divLabel">
        value 2
      </div>
      <div id="divText" style="display: none">
        <input type="text" value="value 1" />
      </div>
    </td>
    <td>
      <input type="button" value="edit" onclick="EditRecord(this);" />
    </td>
  </tr>
</table>

但它对我不起作用。

Answer 1

你很接近。有两个问题:

1. 您的 HTML 无效。您不能为多个元素重复使用相同的 id。您可以改用类:

   <tr>
       <td>
           <!-- Note 'class' rather than 'id' below -->
           <div class="divLabel">
               value 1
           </div>
           <!-- Note 'class' rather than 'id' below -->
           <div class="divText" style="display: none">
               <input type="text" value="value 1" />
           </div>
       </td>
       <td>
           <input type="button" value="edit" onclick="EditRecord(this);" />
       </td>
   </tr>
   

2. closest 是正确的，但 children 不是。你要find相反，因为 div 不是该行的直接子级。

因此假设您按照 #1 更改 HTML，我们将使用 find 和 #2 的类选择器:

function EditRecord(elem) {
    var divlabel = $(elem).closest('tr').find('div.divLabel');
}