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优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
vue实现列表垂直无缝滚动
Apr 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开发工具有哪五款
2015/11/09 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
python如何让类支持比较运算
2018/03/20 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python递归函数绘制分形树的方法
2018/06/22 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
如何使用PHP session
2015/04/21 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
个人党性剖析材料
2014/02/03 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
总经理岗位职责
2015/02/04 职场文书
外贸英文求职信范文
2015/03/19 职场文书
学校实习推荐信
2015/03/27 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
python如何做代码性能分析
2021/04/26 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS