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 相关文章推荐
javascript 精粹笔记
May 09 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
js实现日期级联效果
Jan 23 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
webpack 2.x配置reactjs基本开发环境详解
Aug 08 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中各种定义变量的方法小结
2017/10/18 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
简单了解three.js 着色器材质
2020/08/03 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
python写入xml文件的方法
2015/05/08 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python人脸识别初探
2017/12/21 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
新闻发布会主持词
2014/03/28 职场文书
护理专业自我评价
2015/03/11 职场文书
特种设备安全管理制度
2015/08/06 职场文书