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 相关文章推荐
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
Vue.js仿Select下拉框效果
Feb 18 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JQuery小知识
2010/10/15 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python创建xml的方法
2015/03/10 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python self用法详解
2020/11/28 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
学习心得体会
2014/01/01 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
团代会闭幕词
2015/01/28 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技