jquery中通过父级查找进行定位示例


Posted in Javascript onJune 28, 2013
<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 相关文章推荐
js获取location.href的参数实例代码
Aug 02 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
JavaScript操纵窗口的方法小结
Jun 28 #Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
js获取当前日期代码适用于网页头部
Jun 27 #Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 #Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 #Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
You might like
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python实现的用户登录系统功能示例
2018/02/05 Python
python简单商城购物车实例代码
2018/03/15 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
店长助理岗位职责
2013/12/13 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
促销活动总结报告
2014/04/26 职场文书
安徽导游词
2015/02/12 职场文书
求职自荐信怎么写
2015/03/04 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫