jQuery 选择器项目实例分析及实现代码


Posted in Javascript onDecember 28, 2012

首先废话一句,jQuery选择器真心很强大!
在项目中遇到这么一个问题easyui的问题
jQuery 选择器项目实例分析及实现代码 
如图所示,当前页面显示的是“原始报文查询”的页面,当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即:左侧点击“原始报文查询”,那么右侧的“补发运抵报文”展开,并选中“原始报文查询”,“后台管理”关闭?
实现方式如下
1、右侧的“原始报文查询”等用到的是easyui的tabs控件,查看api知道,tabs有个onSelect方法,只要在onSelect方法中写入自己想做的事情就可以了。
2、触发事件是找到了,那么具体怎么实现想要的效果呢?
jQuery 选择器项目实例分析及实现代码  
左侧导航栏代码结果如上图:最外层是easyui的accordion控件,accordion里有很多pannel,一个pannel对应图1中的一个父目录和其下面的子目录,比如“补发运运抵报告”这一模块。panel里有两个div,
第一个div是父目录,第二个div里包含了很多子目录。
首先实现选中右侧的tabs时,左侧对应的导航条被选中。先取出所有子目录的选中状态,然后让当前子目录被选中。

$('#idaccordion li div').removeClass("selected"); 
$('#idaccordion span:contains("'+title+'")').parent().parent().addClass("selected");

3、问题是该选中的是选中了,但选中的子菜单的父菜单并没有展开。easyui中的panel有个expand方法,但是怎样知道哪个panel(既父菜单)应该展开呢?如图2所示:一直选中了“原始报文查询”,现在要让补发运抵报告这个父菜单展开。“原始报文查询“所在的元素span的祖先节点的兄弟节点的第一个子节点才是”补发运抵报告“所在的节点。
if( $('#idaccordion span:contains("'+title+'")').length > 0 ){ 
var accordionTitle = $('#idaccordion span:contains("'+title+'")').closest('.panel-body').prev().find('.panel-title').text(); 
var p = $('#idaccordion').accordion('getPanel',accordionTitle); 
p.panel('expand'); 
}

首先在id为idaccordion的子孙节点中查找包含文本为title的span(即<span class="icon icon-users"> 原始报文查询</span>),然后找到最近的class为panel-body的祖先节点,然后找到这个节点的前一个兄弟节点(即<div class="panel-header accordion-header accordion-header-selected" style="height: 15px; width: 161px;">),然后找到这个节点的类为panel-title的子节点,就获取到了这个节点的文本,即”补发运抵报告“。
整体代码如下
//当右侧选择某个tab时,左边对应的菜单也被选中,且这个菜单所在的accordion展开,其他的accordion关闭 
$('#tabs').tabs({ 
onSelect:function(title){ 
$('#idaccordion li div').removeClass("selected"); 
$('#idaccordion span:contains("'+title+'")').parent().parent().addClass("selected"); 
if( $('#idaccordion span:contains("'+title+'")').length > 0 ){ 
var accordionTitle = $('#idaccordion span:contains("'+title+'")').closest('.panel-body').prev().find('.panel-title').text(); 
var p = $('#idaccordion').accordion('getPanel',accordionTitle); 
p.panel('expand'); 
} 
} 
});

平时用的比较少的是closest方法,该方法可以获取某个元素最近的父元素,还有一个类似的方法parents,两者的区别如下
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
代码如下
$('#items').parents('.parent1'); 
closest([expr])

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
$('#items1').closest('.parent1');

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。
Javascript 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
javascript中的delete使用详解
Apr 11 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
谈谈JS中的!!
Dec 07 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 #Javascript
You might like
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
python中Flask框架简单入门实例
2015/03/21 Python
python自带的http模块详解
2016/11/06 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python读写docx文件的方法
2018/05/08 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
简单了解django orm中介模型
2019/07/30 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
任意存:BOXFUL
2018/05/21 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
家具商场的活动方案
2014/08/16 职场文书
幸福中国演讲稿
2014/09/12 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL