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中实现私有属性的写类方式(一)
Dec 04 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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
php过滤危险html代码
2008/08/18 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
accesskey 提交
2006/06/26 Javascript
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
面试常见的js算法题
2017/03/23 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python对文件操作知识汇总
2016/05/15 Python
python实现简单购物商城
2016/05/21 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python中for in的用法详解
2020/04/17 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
初中三好学生事迹材料
2014/01/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
趣味运动会通讯稿
2015/07/18 职场文书