2011-05-23 99 views
3

我不斷影響與其他元素相關的元素,但我的方法看到一個小業餘愛好者!父母,孩子的jQuery短手

// <div> <div> <div> <ul> matched item where script is called from </ul> </div> </div> <a class="postMore">LINK</a> </div> 

我使用;

$(this).parent('div').parent('div').parent('div').children('a.postMore').css('display','block'); 

這似乎有點麻煩。有沒有更好的方法來處理相關元素?

回答

6

traverse the DOM with jQuery有多種方式,所以你只需要在你的html結構中識別模式,並使用最相關的方法。

在你的例子中,這應該做你想要的,它允許更多的靈活性。

$(this).closest('div:has(a.postMore)').find('a.postMore'); 

演示http://jsfiddle.net/gaby/j2Wgv/


  • .closest()會向上DOM 直到如果發現 我們通過它爲參數的選擇相匹配的元素。
  • 我們的選擇是div:has(a.postMore)這意味着div包含與postMore
  • 一個鏈接,然後我們使用.find()達到實際的鏈接。
+0

輝煌 - 謝謝gaby!對查找有任何處理影響嗎? – v3nt 2011-05-23 10:36:28

+0

@丹尼爾,你的意思是效率問題?不,'.find()'是向下遍歷DOM層次結構最常用的方法,如果指定的選擇器允許,它將使用本地瀏覽器方法進行工作。 – 2011-05-23 10:38:32

2

您可以使用.closest()向上搜索DOM樹。所以如果你給你的div包含a.postMore一類,你可以使用$(this).closest('class').children('a.postMore')。 文檔here

+0

你不必給集裝箱分類。有[':has'](http://api.jquery.com/has-selector/)選擇器只爲此.. – 2011-05-23 10:11:25

+0

不錯,我不知道。感謝和+1爲您的答案。 – rsplak 2011-05-23 10:16:16