js中通过父级进行查找定位元素


Posted in Javascript onJune 15, 2014
<ul id=“newslist”> 
<li> <span class="fr w160 tl">2013-06-24</span> 
<span class="news_list_icon fl mr8 icon" ></span> 
<span class="fl"><a href="{href}" onmouseover="javascript:changeReadIconOver(this);" onmouseout="javascript:changeReadIconOut(this);">身体健康,万事如意</a></span>' 
</li> 
</ul>

如果想要查找到有icon这个class的span(对其进行操作,将news_list_icon换为news_list_icon_hover),除了用原始的代码
$("#newslist li").hover(function(){ 
$("#newslist li").find(".icon").addClass("news_list_icon_hover") },function(){ $("#newslist li").find(".icon").removeClass("news_list_icon_hover") } );

还可以用父级查询的方法进行定位,具体如下:
function changeReadIconOver(alink) { 
$(alink).parent().parent().find(".icon").addClass("news_list_icon_hover"); 
} 
function changeReadIconOut(alink) { 
$(alink).parent().parent().find(".icon").removeClass("news_list_icon_hover"); 
}

$(alink).parent(): 指的是<span class="fl">这个标签
$(alink).parent().parent(): 指的是<li>这个标签$(alink).parent().parent().find(".icon"): 就可以定位到想要的元素了
Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jquery 常用操作方法
Jan 28 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
json数据的列循环示例
Sep 06 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 #Javascript
javascript 寻找错误方法整理
Jun 15 #Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 #Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 #Javascript
jQuery获取动态生成的元素示例
Jun 15 #Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 #Javascript
You might like
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
pandas中去除指定字符的实例
2018/05/18 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python 实现兔子生兔子示例
2019/11/21 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
班组长岗位职责范本
2014/01/05 职场文书
火锅店营销方案
2014/02/26 职场文书
勤俭节约倡议书
2014/04/14 职场文书
群众路线表态发言材料
2014/10/17 职场文书
高质量“欢迎词”
2019/04/03 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL