Question

给出以下HTML代码段：

<div class="image">
  <div class="placeholder">
    <a class="load iframe" href="https://contestapp.com/images/4"><img src="/uploads/image/image_file/4/thumb_he_sport_nutrition_for_active_kids_photo.jpg?1307271623" alt="Thumb_he_sport_nutrition_for_active_kids_photo"></a>
  </div>
  <div class="user">By </div>
  <div class="actions">
      <span>
        <a class="vote-link" href="/images/4/vote"></a>
      </span>
  </div>
</div>

我有一个类投票链接的链接，我想选择链接a.load和a.load img，我怎样才能通过jQuery高效地完成？

Answer 1

首先，您需要使用closest进入共同的祖先。

$(this).closest('div.image');

然后，您需要使用find，multiple selector和descendant selector找到链接和图片：

$(this).closest('div.image').find('a.load, a.load img');

Answer 2

var img = $(this).closest('div.placeholder').find('a.load>img');
var a = $(img).parent();

...将是我首选的方法，因为这会直接定位img，一旦你将它作为一个对象，在处理方面，获得它的父锚应该是相当微不足道的。

编辑：因为我是eejit！

Answer 3

尝试使用jQuery Ancestry插件：

http://plugins.jquery.com/project/ancestry

Answer 4

$('a.vote-link').click(function(){
   $(this).closest('div').prevAll('div.placeholder:first').find('a.load, a.load img');
});

你上升一级，然后向上移动然后向内移动

Answer 5

http://jsfiddle.net/biznuge/K5tB4/7/

刚刚建立了这个比较三个选择器/解决方案在这里执行的速度超过256个单独的结构副本的速度，并且它看起来就像JohnP紧紧抓住它......只是......

Answer 6

嗯......我意识到现在已经决定了，但是......

$(this).closest('div.placeholder').find('a.load, a.load>img');

...在我自己的比较256元素测试中实际上大约快两倍，并且lonesomeday已经链接到此页面内。

只说是全部，因为最初的问题与效率有关......？

在jQuery中选择祖先的有效方法

6 个答案: