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 相关文章推荐
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
Typescript的三种运行方式(小结)
Sep 18 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python3实现多线程聊天室
2018/12/12 Python
python使用PyQt5的简单方法
2019/02/27 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
EJB的激活机制
2013/10/25 面试题
西式婚礼主持词
2014/03/13 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
Python读取和写入Excel数据
2022/04/20 Python