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 相关文章推荐
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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
在PHP中使用模板的方法
2008/05/24 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
itchat接口使用示例
2017/10/23 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
新手学python应该下哪个版本
2020/06/11 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
《木笛》教学反思
2014/03/01 职场文书
竞聘演讲稿
2014/04/24 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
学生评语集锦
2015/01/04 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL