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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
原生JS实现萤火虫效果
Mar 07 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/09 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
师恩难忘教学反思
2014/04/27 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
计划生育证明格式范本
2014/09/12 职场文书
地方白酒代理协议书
2014/10/25 职场文书
商铺租房协议书范本
2014/12/04 职场文书
小学家长通知书评语
2014/12/31 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL