使用最近函数查找属性值

Question

I have tried this but didn't know whats wrong with it. Results undefined

 $(document).ready(function() { $("img").click(function(event) { var test = $(this).parent('.parentClass').closest('.headingLink').attr('href'); console.log("testing this", test); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parentClass"> <div class="link__img"> <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" /> </div> <div class="content"> <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com"> <h4>some head</h4> </a> <p>hdgajsfjghasjfh</p> </div> </div>

Answer 1

.closest() traverse up the DOM tree. What you are looking for is .find() . Also you are using .parent() which traverses up one level. Use .closest() instead.

 $(document).ready(function() { $("img").click(function(event) { var test = $(this).closest('.parentClass').find('.headingLink').attr('href'); console.log("testing this", test); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parentClass"> <div class="link__img"> <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" /> </div> <div class="content"> <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com"> <h4>some head</h4> </a> <p>hdgajsfjghasjfh</p> </div> </div>

Answer 2

You can use parents instead of parent and use find to get the child.

.parents() - Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

.find() - Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Example:

 $(document).ready(function() { $("img").click(function(event) { var test = $(this).parents('.parentClass').find('.headingLink').attr('href'); console.log("testing this", test); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parentClass"> <div class="link__img"> <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" /> </div> <div class="content"> <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com"> <h4>some head</h4> </a> <p>hdgajsfjghasjfh</p> </div> </div>

Answer 3

closest() is just for searching in parents not in childrens. You're searching in childrens so use find() instead of closest() .

Answer 4

parent([selector]) only traverses up one level, and closest(selector) only traverses up. Instead, I think you should use closest('.parentClass') and then use closestParentClass.find('.headingLink') .

Edit: @Kalimah has a more detailed (with code) explanation.

Answer 5

$(document).ready(function() {
  $("img").click(function(event) {
    var test = $(this).closest('.parentClass').find('.headingLink').attr('href');
    console.log("testing this ", test);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
  <div class="link__img">
    <img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
  </div>
  <div class="content">
    <a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
      <h4>some head</h4>
    </a>
    <p>hdgajsfjghasjfh</p>
  </div>
</div>

Answer 6

The .closest and .find selectors are complements of each other and used together are the best way to get to the corresponding element of where the click (or any event) occurred.

The .closest selector traverses up the DOM to find the parent that matches the conditions where as the .find selector traverses down the DOM where the event occurred, that matches the conditions.

var test = $(this).closest('.parentClass').find('.headingLink').attr('href');

Replacing your code with this line of code should work for your problem.