Эффективный способ выбора предков в jQuery

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, множественный селектор и потомок селектора :

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

Answer 2

ммм .... Я понимаю, что это уже решено, но ...

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

... на самом деле примерно в два раза быстрее в сравнительном тесте на 256 элементов, который я и одинокий день связали сна этой странице.

Просто сказать «все», поскольку первоначальный вопрос касается эффективности ...?

Answer 3

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

только что построил это, сравнивая, как быстро три селектора / решения здесь выполняют более 256 отдельных копий структуры, которую вы имеете на месте, и мне кажется, что ДжонП сжимает это ... просто...

Answer 4

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

Вы поднимаетесь на один уровень вверх, затем двигаетесь вверх в направлении, а затем идете внутрь

Answer 5

Попробуйте плагин jQuery Ancestry:

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

Answer 6

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

... будет моим предпочтительным методом, так как он будет нацелен на img напрямую, и как только вы получите его как объект, получение его родительского якоря должно быть довольно тривиальным, с точки зрения обработки.

Отредактировано: потому что я eejit!