通过 javascript 在另一个元素中添加 class？

Question

I want to add a class to a class to a specific element, that is in another element via javascript. In my case I have a div with the class "jet-woo-product-thumbnail" inside this div I have a linked image inside an a-tag like this

<div class="jet-woo-product-thumbnail">
  <a href="https://example.com" rel="bookmark">
    <img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="">
  </a>

Now i need to add the class to the hyperlink element like:

<div class="jet-woo-product-thumbnail">
  <a href="https://example.com" class="my_class" rel="bookmark">
    <img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt=""></a>

I tried:

jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');

but this did not work. Is there any error.

Answer 1

It works: https://stackblitz.com/edit/js-jquery-find-in-a-doc-addclass?file=index.html

You used it in a doc ready function, like this?

$(document).ready(function(){
  jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');
});

Make sure you've closed the div tag correctly. In your example code it is not closed:

<div class="jet-woo-product-thumbnail">
...
</div>

Otherwise jquery will not work.