欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery中通过父级查找进行定位示例

程序员文章站 2023-03-26 22:58:59
代码如下:
  • 201...

代码如下:


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