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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
微信小程序页面渲染实现方法
Nov 06 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
农贸市场管理制度
2014/01/31 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
单位婚育证明范本
2014/11/21 职场文书
世界气象日活动总结
2015/02/27 职场文书
小学德育工作总结2015
2015/05/12 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL