jquery parent()方法在table标签中使用需要注意的一个问题

今日，在页面的table中使用parent()方法回溯上级元素的时候发现了一个问题。很有意思，分享下。直接上代码：

<table class="table table-bordered  table-striped">

            <tbody class="list" data-bind="with:CustomerVM">
                <!--ko foreach:$data-->
                <tr>
                    <td>
                        <table class="table table-bordered  table-striped">
                            
                                <tr>
                                    <td nowrap>姓名</td>
                                    <td colspan="5">
                                        <p class="floatLeft margin-right-5" data-bind="text:Name">></p>
                                        <p class="tc phoneInfo floatLeft margin-right-5" data-bind="text:Phone">></p>
                                        <p class="thisSort floatLeft margin-right-5" data-bind="text:SortId">></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>意向</td>
                                    <td colspan="5">
                                        <p class="thisIntentionnality floatLeft margin-right-5" data-bind="text:IntentionalityId">></p>
                                        <p class="floatLeft margin-right-5" data-bind="css:{'text-red':ReviewRemainDaysOrder()<=2},text:ReviewRemainDaysOrder"></p>
                                        <p class="floatLeft margin-right-5" data-bind="text:LastCustomerReviewMark"></p>
                                        <p class="floatLeft margin-right-5" data-bind="text:Dealed() == 1?'已成交':'未成交'"></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>操作</td>
                                    <td colspan="5">
                                        <p class="floatLeft margin-right-5"><a data-bind="attr:{href:'/M/operator/Customeradd?gid='+GID()}">修改</a></p>
                                        <p class="floatLeft margin-right-5"><a data-bind="visible:Dealed()==0,attr:{href:'/M/operator/CustomerReviewAddForCustomer?gid='+GID()}">添加回访</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="attr:{'data-iid':IID},click:QueryReviewPhone">查看回访</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="visible:Dealed()==0,attr:{'data-gid':GID},click:PhoneReport">上报号码</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="visible:Dealed()==0,attr:{'data-gid':GID},click:ChangeDealed">成交</a></p>
                                    </td>
                                </tr>
                            
                        </table>
                    </td>
                </tr>

                <tr style="display:none;">
                    <td colspan="14">
                        <table class="table table-bordered">
                            <tr>
                                <th class="col-xs-2">回访人</th>
                                <th class="col-xs-4">备注</th>
                                <th class="col-xs-2">回访方式</th>
                                <th class="col-xs-2">时间</th>
                            </tr>
                            <!-- ko foreach:$data.CustomerReviewViewCollection -->

                            <tr>
                                <td class="col-xs-2 thisAdmin" data-bind="text:AdminId"></td>
                                <td class="col-xs-6" data-bind="text:Mark"></td>
                                <td class="col-xs-2 thisMode" data-bind="text:ReviewMode"></td>
                                <td class="col-xs-2" data-bind="text:CreateTime"></td>
                            </tr>
                            <!--/ko-->
                        </table>
                    </td>
                </tr>
                <!--/ko-->
            </tbody>

        </table>

我需要通过QueryReviewPhone 函数来控制

<tr style="display:none;">
...
</tr>

这部分元素的显示与隐藏。按照回溯的情况。我在QueryReviewPhone 函数中是这样写的：

//手机端查看回访
function QueryReviewPhone(item, e) {
    //console.info("start");
    console.info($(e.currentTarget).parent().parent().parent().parent());
    $(e.currentTarget).parent().parent().parent().parent().parent().parent().next().toggle();
}

按正常情况，这个parent()回溯写法是能够控制那部分元素的显示与隐藏的。但是实际情况却是，点击没反应。因此我输出中间变量查看情况。经过多次尝试发觉：

console.info($(e.currentTarget).parent().parent().parent().parent());

输出的是tbody一级，而不是想象中的table一级。而那个table中的元素我并没有使用tbody。

我把：

$(e.currentTarget).parent().parent().parent().parent().parent().parent().next().toggle();

改为：

$(e.currentTarget).parent().parent().parent().parent().parent().parent().parent().next().toggle();

多了一个parent()方法，这样才可以。然后我又尝试在内层的table 中增加tbody看效果。

<table class="table table-bordered  table-striped">
                            <tbody>
                                <tr>
                                    <td nowrap>姓名</td>
                                    <td colspan="5">
                                        <p class="floatLeft margin-right-5" data-bind="text:Name">></p>
                                        <p class="tc phoneInfo floatLeft margin-right-5" data-bind="text:Phone">></p>
                                        <p class="thisSort floatLeft margin-right-5" data-bind="text:SortId">></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>意向</td>
                                    <td colspan="5">
                                        <p class="thisIntentionnality floatLeft margin-right-5" data-bind="text:IntentionalityId">></p>
                                        <p class="floatLeft margin-right-5" data-bind="css:{'text-red':ReviewRemainDaysOrder()<=2},text:ReviewRemainDaysOrder"></p>
                                        <p class="floatLeft margin-right-5" data-bind="text:LastCustomerReviewMark"></p>
                                        <p class="floatLeft margin-right-5" data-bind="text:Dealed() == 1?'已成交':'未成交'"></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>操作</td>
                                    <td colspan="5">
                                        <p class="floatLeft margin-right-5"><a data-bind="attr:{href:'/M/operator/Customeradd?gid='+GID()}">修改</a></p>
                                        <p class="floatLeft margin-right-5"><a data-bind="visible:Dealed()==0,attr:{href:'/M/operator/CustomerReviewAddForCustomer?gid='+GID()}">添加回访</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="attr:{'data-iid':IID},click:QueryReviewPhone">查看回访</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="visible:Dealed()==0,attr:{'data-gid':GID},click:PhoneReport">上报号码</a></p>
                                        <p class="floatLeft margin-right-5"><a href="javascript:;" data-bind="visible:Dealed()==0,attr:{'data-gid':GID},click:ChangeDealed">成交</a></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

结果发现加上tbody后，使用$(e.currentTarget).parent().parent().parent().parent().parent().parent().parent().next().toggle(); 仍然有效，也就是对jquery来说，在parent()对table回溯上级过程中，无论你是否在table中显式加上tbody，jquery都默认它是存在的，占一层的位置