js中通過父級(jí)進(jìn)行查找定位元素

更新時(shí)間：2014年06月15日 15:33:50 投稿：whsnow

這篇文章主要介紹了js中如何通過父級(jí)進(jìn)行查找定位元素,需要的朋友可以參考下

 
<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這個(gè)class的span（對(duì)其進(jìn)行操作，將news_list_icon換為news_list_icon_hover），除了用原始的代碼

復(fù)制代碼代碼如下:

 
$("#newslist li").hover(function(){ 
$("#newslist li").find(".icon").addClass("news_list_icon_hover") },function（）{ $("#newslist li").find(".icon").removeClass("news_list_icon_hover") } ); 

還可以用父級(jí)查詢的方法進(jìn)行定位，具體如下：

復(fù)制代碼代碼如下:

 
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">這個(gè)標(biāo)簽
$(alink).parent().parent(): 指的是<li>這個(gè)標(biāo)簽$(alink).parent().parent().find(".icon"): 就可以定位到想要的元素了

您可能感興趣的文章:

相關(guān)文章

新手快速入門JavaScript裝飾者模式與AOP
這篇文章主要介紹了新手快速入門JavaScript裝飾者模式與AOP,在不改變對(duì)象）的情況下動(dòng)態(tài)的為其添加功能,這就是裝飾者模式，下面小編帶大家來深入學(xué)習(xí)一下吧
2019-06-06
IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例
本篇文章主要介紹了IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
微信小程序開發(fā)中Promise的使用(aysnc,await)及場(chǎng)景分析
在微信小程序開發(fā)中,錯(cuò)誤使用Promise可能導(dǎo)致無法正確獲取數(shù)據(jù),本文分析了一個(gè)常見錯(cuò)誤場(chǎng)景,即在異步函數(shù)中未使用await或.then()處理Promise,導(dǎo)致無法獲取異步操作的返回結(jié)果,文章提供了使用await和鏈?zhǔn)秸{(diào)用.then()的解決方法,幫助開發(fā)者避免類似錯(cuò)誤,確保數(shù)據(jù)正確返回
2024-10-10
JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法，字典即Dictionary，是一種以?鍵-值對(duì)?形式存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，下文更多相關(guān)介紹需要的小伙伴可以參考一下
2022-04-04
微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)功能的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實(shí)例代碼，通過截圖加實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
Javascript和Ajax中文亂碼吐血版解決方案
一般來說中文亂碼用js結(jié)合escape來解決，但下面的方法是一般后臺(tái)中的一些問題，需要注意下輸出順序，先聲明編碼類型在輸出內(nèi)容是個(gè)好習(xí)慣。
2009-12-12
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果...
2007-08-08
DataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實(shí)例
下面小編就為大家?guī)硪黄狣ataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
將json當(dāng)數(shù)據(jù)庫一樣操作的javascript lib
使用javascript操作JSON的類庫TAFFY DB，具體介紹了：查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。
2013-10-10
JavaScript 數(shù)組中最大最小值
本文給大家匯總介紹的是獲取JavaScript 數(shù)組中最大最小值的方法和示例，非常的詳細(xì)和全面，希望對(duì)大家學(xué)習(xí)JavaScript能夠有所幫助
2016-06-06