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 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
DOM 事件流详解
Jan 20 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php 中英文语言转换类代码
2011/08/11 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap插件全集
2016/07/18 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python的历史与优缺点整理
2020/05/26 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
个人自荐信
2013/12/05 职场文书
责任担保书范文
2014/05/21 职场文书
经济管理自荐书
2014/06/09 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
小学班主任事迹材料
2014/12/17 职场文书
保卫工作个人总结
2015/03/03 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技