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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue完美实现el-table列宽自适应
May 08 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获取随机数字和字母的方法详解
2013/06/06 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
什么是数组名
2012/05/10 面试题
清明节演讲稿
2014/05/27 职场文书
超市创意活动方案
2014/08/15 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
mysql 子查询的使用
2022/04/28 MySQL