首先废话,jQuery选择器真的很厉害!在项目中遇到这样的问题:easyui问题。
如图,当前页面显示“原消息查询”,但当时左侧导航栏选择了“重发消息查询”。如何将右侧菜单与左侧导航链接,即点击左侧“原消息查询”,则右侧“补发到达消息”将展开,选择“原消息查询”并关闭“后台管理”?实现方法如下:1。右侧的“原始消息查询”使用easyui的选项卡控件。查看api,我们知道tab有一个onSelect方法,所以我们只需要在onSelect方法中写下我们想做的事情。2.触发事件找到了,那么如何达到预期的效果呢?
左侧导航栏的代码结果如上图所示:最外层是easyui的手风琴控件,手风琴中有多个pannel,一个pannel对应图1中的一个父目录及其子目录,比如“补发到货报表”模块。面板中有两个div,第一个div是父目录,第二个div包含很多子目录。首先,当选择右侧的选项卡时,会选择左侧相应的导航栏。首先取出所有子目录的选中状态,然后让当前子目录被选中。复制代码如下: $(' # idaccordini div ')。removeclass('选定');$(' # idaccordion span : contains(' title ' ')')。父项()。父项()。addClass('选定');3.问题是选定的项目已选定,但选定子菜单的父菜单未展开。easyui中的Panel有一个展开方法,但是如何知道应该展开哪个面板(父菜单)?如图2所示,“原消息查询”一直被选中,现在需要展开补发到货报告的父菜单。原始消息查询所在的元素跨度的祖先节点的同级节点的第一个子节点是重新发出的到达报告所在的节点。复制代码如下: if($(' # idaccordingspan 3360包含(' title ' ')'))). length 0){ varaccordingtitle=$(' # idaccordingspan 3360包含(' title ' ')')。最近的('。面板-主体’)。prev()。查找('。面板标题')。text();var p=$('#idaccordion ')。手风琴(' getPanel ',accordionTitle);p . panel(' expand ');}首先,在id为idaccordion的子代节点中查找标题为span的span(即span class='icon icon-users '原始消息查询/span),然后查找class为panel-body的最近的祖先节点。然后找到这个节点的上一个兄弟节点(即div class=' panel-header accordion-header accordion-header-selected ' style=' height : 15px;宽度: 161 px;'),然后找到该节点的类为面板标题的子节点,得到该节点的文本,即“补发到货报告”。整体代码如下:复制代码如下: //当右边选中一个标签页时,左边对应的菜单也被选中,这个菜单所在的手风琴展开,其他手风琴关闭$(' # tab ')。制表符({ on select : function(title){ $(' # id accordion Li div ')。removeclass('。$(' # idaccordion span : contains(' title ' ')')。父项()。父项()。addClass('选定');if($(' # idaccordion span : contains(' title ' ')')。长度0){ var accordionTitle=$(' # idaccordion span : contains(' title ' ')')。最近的('。面板-主体’)。prev()。查找('。面板标题')。text();var p=$('#idaccordion ')。手风琴(' getPanel ',accordionTitle);p . panel(' expand ');} } });最接近的方法很少使用,可以得到一个元素最接近的父元素,还有一个类似的方法parents,它们的区别如下:parents([expr])得到一个包含匹配元素所有祖先元素(不包括根元素)的元素集。您可以通过可选表达式进行筛选。代码复制如下: $ ('# items ')。父母(' . parent 1 ');close([expr])close将首先检查当前元素是否匹配,如果匹配,则直接返回元素本身。如果没有匹配,逐层查找父元素,直到找到与选择器匹配的元素。如果没有找到任何东西,将返回一个空的jQuery对象。复制代码是: $(' # item 1 ')。最接近(' . parent 1 ');科技英语与父母的主要区别如下:1。前者从当前元素开始,后者从父元素开始;2.前者逐步向上搜索,直到找到匹配的元素,而后者向上搜索,直到找到根元素,然后将这些元素放入临时集合中,然后用给定的选择器表达式过滤它们。3,前者返回0或1个元素,后者可能包含0、1或更多元素。Closest对于处理事件委托非常有用。