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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 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
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python3.4实现邮件发送功能
2018/05/28 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python实现logistic分类算法代码
2020/02/28 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
专业实习自我鉴定
2013/10/29 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
家庭教育的心得体会
2014/09/01 职场文书
总经理致辞
2015/07/29 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
Golang 并发编程 SingleFlight模式
2022/04/26 Golang