今日,在页面的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都默认它是存在的,占一层的位置