[jQuery] More efficient way to find Parent element
after learning the difference between parents and parent, I am having
to resort to using parent(), but it's not very clean.
Consider the following table, which is embedded in a page, which may
have additional tables (for this reason I cannot use parents("table")
because it returns multiple tables):
<table class="gridview" id="A" cellpadding="0" cellspacing="0">
<tbody>
<tr class='gvheader'>
<th width="20px"> </th>
<th width="150px">Host</th>
<th width="100px">Directs To</th>
<th width="40px">TTL</th>
</tr>
<tr class="dgalt" id="trEmptyA" runat="server" visible="false">
<td colspan="5">You currently do not have any Records.</td>
</tr>
<tr class="gvfooter">
<td colspan="4" class="newRecord">Add New Record</td>
</tr>
</tbody>
</table>
and now my jquery:
Notice the multiple .parent().parent().parent()
and $currentTable.children().children().size();
$(function() {
$(".newRecord").click(function() {
var $currentTable = $(this).parent().parent().parent
();
var tableType = $currentTable.attr("id");
var numRows = $currentTable.children().children().size
();
var $templateRow = $("#EditRowTemplate").clone().attr
("id", "new"+tableType+"Record_"+numRows);
if (tableType=='MX'){
$("td:nth-child(5)", $templateRow).show();
} else {
$("td:nth-child(5)", $templateRow).hide();
}
$templateRow.insertAfter($("tr:last",
$currentTable).prev());
});
});
Is there a way to use parents, while only selecting the immediate
parent table? and similarily with children, is there a better way to
do this?
I cannot always assume this is the first table, there may be 3,4,5 etc
tables side-by-side.
Thanks