Question

Given the following HTML snippet:

<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>

I have a link of class vote-link and I want to select both the the link a.load and the a.load img, How can I do it efficiently via jQuery?

Answer 1

First you’ll need to go up to a common ancestor with closest.

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

Then you’ll need to find the link and the image using find, the multiple selector and the descendant selector:

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