javascript - 单击子元素时，向同级元素添加属性

Question

我有一个table有几列，如下所示:

<tr role="row" class="odd">
    <td class="sorting_1">
        <button id="1" class="btn btn-info btn-sm _edit_btn">Edit</button>
    </td>
    <td>1</td>
    <td>Asht</td>
    <td>5</td>
    <td>16</td>
    <td>5</td>
    <td>3</td>
    <td>3</td>
    <td>2</td>
    <td>Sughd</td>
    <td>2</td>
    <td>3505207000000</td>
    <td>3</td>
    <td>2</td>
    <td>15</td>
    <td>5</td>
</tr>

我想要做的是为每个 <td> 添加一个属性按钮上的元素单击位于第一个 <td> 上的按钮表的内容。

我使用 jQuery 来达到这个目的。我尝试使用 sibling 功能来做到这一点，但它不起作用 <td>元素不是 <button> 的同级元素元素但另一个<td>元素。

Answer 1

为此，您可以使用 closest() 查找 button 的父级 tr，然后使用 find() 获取 td，如下所示:

$('button').click(function() {
    $(this).closest('tr').find('td').attr('foo', 'bar');
});

如果您更愿意使用您提到的 siblings() ，那么您可以获取父级 td 并使用 siblings()对此:

$('button').click(function() {
    $(this).closest('td').siblings().attr('foo', 'bar');
});

请注意，如果您有意的话，此版本不会将该属性添加到第一个 td 元素。