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 uploadify 在FF下无效的解决办法
Sep 26 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
深入了解JavaScript 私有化
May 30 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 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
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
jquery 常用操作方法
2010/01/28 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
详解JavaScript树结构
2017/01/09 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
python八皇后问题的解决方法
2018/09/27 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
使用Pycharm分段执行代码
2020/04/15 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
学期自我鉴定
2013/11/04 职场文书
六查六看剖析材料
2014/02/15 职场文书
事业单位考核材料
2014/05/21 职场文书
高考标语大全
2014/06/05 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
医院党建工作总结2015
2015/05/26 职场文书
网络舆情信息简报
2015/07/21 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
小学数学国培研修日志
2015/11/13 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server