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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
js比较日期大小的方法
May 12 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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
php在线打包程序源码
2008/07/27 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
企业管理专业个人求职信范文
2013/09/24 职场文书
求职信范文怎么写
2014/01/29 职场文书
培训科主任岗位职责
2014/08/08 职场文书
德育标兵事迹材料
2014/08/24 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
大一新生检讨书
2014/10/29 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
健康教育主题班会
2015/08/14 职场文书
2016年国培研修日志
2015/11/13 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Redis如何一键部署脚本
2021/04/12 Redis