JQuery closest and find example

JQuery closest and find example to target and get values where you cannot individually do so i.e multiple elements using the same id/class name.

CodePen link.

Click the buttons on the right to view the values from that row.

jQuery closest traverses up until a match for the selector is found. The selector can be an id, class name or element.

jQuery find will search the descendants until a match is found. Again the selector can be an id, class name or element.

$(this).closest('tr').find('.id-td').text();

As the buttons are in the tr element along with the values we want, the closest function will target this and by using find() it will select only the class name id-td in this tr tag.

<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th>ID</th>
        <th>Item</th>
        <th>Price</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="id-td">5841</td>
        <td class="item-td">Coffee</td>
        <td class="price-td">2.50</td>
        <td>
            <a class='btn btn-info btn-sm action-btn-id' role='button'>ID</a>
            <a class='btn btn-primary btn-sm action-btn-item' role='button'>Item</a>
            <a class='btn btn-secondary btn-sm action-btn-price' role='button'>Price</a>
        </td>
    </tr>
    <tr>
        <td class="id-td">5842</td>
        <td class="item-td">Rice</td>
        <td class="price-td">2.00</td>
        <td>
            <a class='btn btn-info btn-sm action-btn-id' role='button'>ID</a>
            <a class='btn btn-primary btn-sm action-btn-item' role='button'>Item</a>
            <a class='btn btn-secondary btn-sm action-btn-price' role='button'>Price</a>
        </td>
    </tr>
    <tr>
        <td class="id-td">5843</td>
        <td class="item-td">Bread</td>
        <td class="price-td">3.10</td>
        <td>
            <a class='btn btn-info btn-sm action-btn-id' role='button'>ID</a>
            <a class='btn btn-primary btn-sm action-btn-item' role='button'>Item</a>
            <a class='btn btn-secondary btn-sm action-btn-price' role='button'>Price</a>
        </td>
    </tr>
    <tr>
        <td class="id-td">5844</td>
        <td class="item-td">Milk</td>
        <td class="price-td">2.80</td>
        <td>
            <a class='btn btn-info btn-sm action-btn-id' role='button'>ID</a>
            <a class='btn btn-primary btn-sm action-btn-item' role='button'>Item</a>
            <a class='btn btn-secondary btn-sm action-btn-price' role='button'>Price</a>
        </td>
    </tr>
    <tr>
        <td class="id-td">5845</td>
        <td class="item-td">Flour</td>
        <td class="price-td">2.65</td>
        <td>
            <a class='btn btn-info btn-sm action-btn-id' role='button'>ID</a>
            <a class='btn btn-primary btn-sm action-btn-item' role='button'>Item</a>
            <a class='btn btn-secondary btn-sm action-btn-price' role='button'>Price</a>
        </td>
    </tr>
    </tbody>
</table>