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 运算数的求值顺序
Aug 23 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序日历效果
2018/12/29 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Django中的Model操作表的实现
2018/07/24 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
杠杆的科学教学反思
2014/01/10 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
森林防火标语
2014/06/23 职场文书
优秀教师单行材料
2014/12/16 职场文书
辞职信格式范文
2015/05/13 职场文书
闪闪的红星观后感
2015/06/08 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python语言中的数据类型-序列
2022/02/24 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis