Jq内容选择器操作

最新推荐文章于 2022-06-08 09:08:20 发布

码农Stromling

最新推荐文章于 2022-06-08 09:08:20 发布

阅读量247

点赞数

文章标签： web jquery javascript

本文链接：https://blog.csdn.net/weixin_42396003/article/details/116592933

版权

今天接到一个任务，处理输入框的隐藏问题，条件是返回的data是否包含某个字段
前提须知，Jq的选择器，不太了解的可以移步 Jq选择器

页面分析：

问题：如果物理卡号存在，卡号输入框显示，反之不显示。
拆分：1.判断物理卡号字段是否存在 2.获取卡号输入框是否隐藏
页面展示

物理卡号字段代码：

<td field="ticketPhyId" class="">
	<div>
		<span>物理卡号</span>
		<span class="datagrid-sort-icon"/>
	</div>
</td>

卡号输入框代码：

<div class="grid_item_container">...</div>
<div class="grid_item_container">...</div>
<div class="grid_item_container">...</div>
<div class="grid_item_container">...</div>
	<label for="AgmDetail_cardNo" >
		卡号
	</label>
	<input type="text" id="AgmDetail_cardNo">
	<span class="textbox" style="width: 133.011px;">
		<input id="_easyui_textbox_input17" type="text" >
	</span>
</div>

思路：


 1. 通过内容选择器获取物理卡号位置
 2. 通过类选择器循环获取卡号输入框

实现

function hideCardNum() {
	//定位卡号输入框
	$(".grid_item_container label").each(function() {
		if ($(this).text() === '卡号') {
			//定位物理卡号字段
			if ($('td div span:contains("物理卡号")').length !== 1) {
				//获取父节点隐藏
				$(this).parent().hide(); 
			}
		}
	});
}

参考：Javascript设置HTML元素的可见性