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>

传统jQuery实现方式

若要定位具有icon类的span元素（例如将其class从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") 则可成功定位到目标元素。