js中通过父级进行查找定位元素


Posted in Javascript onJune 15, 2014
<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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
解析原生JS getComputedStyle
May 25 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 #Javascript
javascript 寻找错误方法整理
Jun 15 #Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 #Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 #Javascript
jQuery获取动态生成的元素示例
Jun 15 #Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 #Javascript
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
prototype class详解
2006/09/07 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
python如何读写json数据
2018/03/21 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python小项目之五子棋游戏
2019/12/26 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
给客户的道歉信
2014/01/13 职场文书
小学生元旦广播稿
2014/02/21 职场文书
家长对老师的感言
2014/03/11 职场文书
求职简历自我评价范例
2014/03/12 职场文书
霸气队列口号
2014/06/18 职场文书
雨花台导游词
2015/02/06 职场文书
青年志愿者活动感想
2015/08/07 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python