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

139 阅读 0 评论 92 点赞

我是靠谱客的博主想人陪咖啡，最近开发中收集的这篇文章主要介绍js中通过父级进行查找定位元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<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"): 就可以定位到想要的元素了