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 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js实现的折叠导航示例
Nov 29 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python字符编码判断方法分析
2016/07/01 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
三下乡活动方案
2014/01/31 职场文书
努力学习演讲稿
2014/05/10 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL