本文介绍在JavaScript中如何通过父级节点查找并定位特定子元素的技巧。通过示例代码展示了利用parent()方法逐级向上查找父元素，再结合find()方法向下定位目标元素的过程，适用于需要动态操作DOM结构的场景。
HTML结构示例
代码如下：
<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") 则可成功定位到目标元素。