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克隆对象深度介绍
Nov 20 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
bootstrap表单示例代码分享
May 18 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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 MySQL与分页效率
2008/06/04 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JavaScript类的写法
2016/09/17 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
java判断三位数的实例讲解
2019/06/10 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
中层干部考核评语
2015/01/04 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android