单击子元素时，将属性添加到元素的同级中

Question

I have a table with several columns, which looks like this:

<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>

What I want to do is to add an attribute to each <td> element on the button click of the button which is located on the very first <td> of the table.

I use jQuery for this purpose. I tried to do it using the siblings function but it doesn't work as the <td> elements are not siblings of the <button> element but of the other <td> elements.

Answer 1

To do this you can use closest() to find the parent tr of the button , then find() to get the td , like this:

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

If you'd prefer to use siblings() as you mentioned, then you can get the parent td and use siblings() on that:

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

Note that this version will not add the attribute to the first td element, if that was your intention.

Answer 2

You can traverse to closest tr element using .closest() method and then find td in it:

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

Answer 3

You can use this one for two cases:

$("button").click(function(e) {
    //if you want to add attribute to all tds then use this line
    $(this).closest("tr").find("td").attr("your-attribute", "value");

    //if you want to add attribute to all tds except the first one then use this line
    $(this).closest("tr").find("td:not(.sorting_1)").attr("your-attribute", "value");
});