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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
window.onload使用指南
2015/09/13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
自主招生自荐信范文
2013/12/04 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
婚礼父母致辞
2015/07/28 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
php字符串倒叙
2021/04/01 PHP
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL