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

首先废话一句，jQuery选择器真心很强大！
在项目中遇到这么一个问题easyui的问题
 
如图所示，当前页面显示的是“原始报文查询”的页面，当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即：左侧点击“原始报文查询”，那么右侧的“补发运抵报文”展开，并选中“原始报文查询”，“后台管理”关闭？
实现方式如下：
1、右侧的“原始报文查询”等用到的是easyui的tabs控件，查看api知道，tabs有个onSelect方法，只要在onSelect方法中写入自己想做的事情就可以了。
2、触发事件是找到了，那么具体怎么实现想要的效果呢？
 　
左侧导航栏代码结果如上图：最外层是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对于处理事件委派非常有用。

赞 (0)

相关推荐

  • JQuery 中几个类选择器的简单使用介绍

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClassSelector.aspx.cs" Inherits="WebApplication1.TestClassSelector" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999

  • jquery 选择器引擎sizzle浅析

    I'm sorry!我用jquery的大概有一年了,只知道$(selector),其内部选择器的流程走向完全不清晰!于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码. 上面说了不是很精彩的开场白,我么来个 for example: $('.test') 在jquery的流程是怎么走的呢? 1.首先会做如下的判断 复制代码 代码如下: /** *关于 querySelector

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jQuery选择器的工作原理和优化分析

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样. 当我们使用选择器的时候$(selec

  • JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")

    样式:$(function (){ $("要选择的标签").click(function (){alert ("弹出对话框内容");}) }); 第一种:Id选择器 用法: 复制代码 代码如下: <head> <title></title> <script src ="Jq/jquery-1.4.2.js" type ="text/javascript" ></script

  • JQuery选择器特辑 详细小结

    这是看<锋利的jquery>时,整理出来的一些东西,很多方法,需要大家亲自实践一下,才会理解得更加深刻,切莫眼高手低哦-- Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器 一.基本选择器:jquery中最常用的选择器,也是最简单的选择器.通过元素id.class和标签名等来查找DOM元素. 表-基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名

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

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

    首先废话一句,jQuery选择器真心很强大! 在项目中遇到这么一个问题easyui的问题  如图所示,当前页面显示的是"原始报文查询"的页面,当时左侧导航栏却选中的是"重发报文查询".如何让右侧的菜单和左侧的导航实现联动即:左侧点击"原始报文查询",那么右侧的"补发运抵报文"展开,并选中"原始报文查询","后台管理"关闭? 实现方式如下: 1.右侧的"原始报文查询"等

  • jquery表单对象属性过滤选择器实例分析

    本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery源码分析-04 选择器-Sizzle-工作原理分析

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,

  • jquery入门—选择器实现隔行变色实例代码

    jquery入门—选择器实现隔行变色实例代码

    1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T

  • jquery选择器和属性对象的操作实例分析

    本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ

  • 高效jQuery选择器的5个技巧实例分析

    本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

  • jQuery 选择器用法实例分析【prev + next】

    目录 jQuery 选择器 (prev + next) 定义和用法 语法 参数 返回值 实例 本文实例讲述了jQuery 选择器用法.分享给大家供大家参考,具体如下: jQuery 选择器 (prev + next) 定义和用法 jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回. 注意: 选择器next的查找范围必须是与"prev元素"相邻的下一个元素,并且必须是"prev元素"的同辈元素.

  • jQuery内容选择器与表单选择器实例分析

    jQuery内容选择器与表单选择器实例分析

    本文实例讲述了jQuery内容选择器与表单选择器.分享给大家供大家参考,具体如下: 内容选择器 jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括以下四种过滤方法: 内容选择器4种用法 内容选择器 选取含有文本内容为"text"的元素 格式:E:contains(text) 包含元素选择器 选取含有选择器所匹配的元素的元素 格式: E:has(selector) 空内容选择器 选取不含任何子元素或文本的空元素 格式: E:empty 非空内容

  • jQuery子选择器与可见性选择器实例分析

    本文实例讲述了jQuery子选择器与可见性选择器.分享给大家供大家参考,具体如下: 子元素选择器与可见性选择器 子元素选择器是允许利用子元素的位置进行获取的选择器 子内容选择器3种用法 E:first-child 选择所有位于其父元素第一个位置的E元素 E:last-child 选择所有位于其父元素最后一个位置的E元素 E:nth-child(n) 选择所有位于其父元素指定位置的E元素,n从1开始 可见性选择器,顾名思义就是获取当前页面可见/不可见的元素 可见性选择器用法如下: E:hidden

随机推荐