2011-05-23 62 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