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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
js实现文字滚动效果
Mar 03 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
AngularJs 常用的过滤器
May 15 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
安装vue-cli的简易过程
May 22 Javascript
JavaScript 作用域实例分析
Oct 02 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
黑夜路人出的几道php笔试题
2009/08/04 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
简单介绍django提供的加密算法
2019/12/18 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
食品安全承诺书
2014/05/22 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
python实现三次密码验证的示例
2021/04/29 Python