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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
javascript 跳转代码集合
Dec 03 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
js微信分享接口调用详解
Jul 23 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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变量的值类型和引用类型
2015/10/21 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python网络爬虫实例讲解
2016/04/28 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python 实现单通道转3通道
2019/12/03 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
几个常见的软件测试问题
2016/09/07 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
农村改厕实施方案
2014/03/22 职场文书
户籍证明模板
2014/09/28 职场文书
中学生学习保证书
2015/02/26 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python