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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
Vue如何清空对象
Mar 03 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php获取某个目录大小的代码
2008/09/10 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python占用的内存优化教程
2019/07/28 Python
简单了解django文件下载方式
2020/02/10 Python
django从后台返回html代码的实例
2020/03/11 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
五十岁生日宴会答谢词
2014/01/15 职场文书
新文化运动的基本口号
2014/06/21 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python