Question

I have the below code and it works but what is the right way to get table onclick of add

HTML

<div> 
    <h4 class="titlebar">
        Skills
        <small><a onclick="return false;" href="/add/" data-span="3">Add</a></small>
    </h4>

    <div class="body">
        <table class="table">
            <tbody>
                <tr><td width="125"></td></tr>
            </tbody>
        </table>
    </div>
</div>

JQuery

var TableBlock = $(this).closest('.titlebar').next().children('table');

this points to Add link

Answer 1

You didn’t mention who is the parent of <div class="body"> and <h4 class="titlebar"> which is critical.

$(this).closest('table-parent(the missing parent)').find('table');

find is better than childern because it will work even if the table get nested in future development.

If you want only the first matched table:

.find('table').first();
//Or
.find('table:first');

---

Update:
Based on your question update, I would add to the parent div a class or an id:

<div class="parent" >
    <h4 class="titlebar">
    ...

Then:

$(this).closest('div.parent').find('table');

If you can’t change the DOM:

$(this).closest('h4.titlebar').parent().find('table');

Or:

$(this).closest('h4.titlebar').siblings('.body').find('table');