jquery中通过父级查找进行定位示例


Posted in Javascript onJune 28, 2013
<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 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
JavaScript操纵窗口的方法小结
Jun 28 #Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
js获取当前日期代码适用于网页头部
Jun 27 #Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 #Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 #Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php使用google地图应用实例
2014/12/31 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
快速了解Python相对导入
2018/01/12 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
程序员机试试题汇总
2012/03/07 面试题
2014年信息宣传工作总结
2014/12/18 职场文书
学前班学生评语
2014/12/29 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
详解MySQL集群搭建
2021/05/26 MySQL