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 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
个人综合鉴定材料
2014/05/23 职场文书
标准毕业生自荐信
2014/06/24 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript