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源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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
Java中final关键字详解
2015/08/10 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
继续学习javascript闭包
2015/12/03 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python实现简单登录验证
2016/04/13 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
小学数学国培感言
2014/03/10 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
检讨书怎么写
2015/05/07 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS