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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
微信小程序实现上传图片功能
May 28 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue中轮训器的使用
Jan 27 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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读MYSQL中文乱码的解决方法
2006/12/17 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
浅谈Django REST Framework限速
2017/12/12 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python sys模块常用方法解析
2020/02/20 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
软件测试常见笔试题
2012/02/04 面试题
面试求职的个人自我评价
2013/11/16 职场文书
护士节策划方案
2014/05/19 职场文书
妇女工作先进事迹
2014/08/17 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python