Develop Reference

Add class inside another element via javascript?

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.

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.

How to get the src of the image within a dynamic DIV with $(this)

I'm trying to get the src of the image, but the div is dynamic, then appears several times on the page, when I click on the DIV, he always gets the first frame and not the DIV clicked, how can I use $(this) correctly? Follows the code I'm using:
<section class="clientes" role="region">
<a href="" title="Cliente" class="group">
<img src="img/image01.jpg" alt="" />
<h2>The title</h2>
<p>content here</p>
</a>
</section>
<script>
$("body").on("click", ".clientes", function(){
var pega = $(".clientes .dsp-none img").attr('src');
$(this).find("a").attr("href", pega);
})

Take advantage of the fact that jQuery arranges for this to refer to the clicked DOM element:
var pega = $(this).find(".dsp-none img").attr('src');
You may or may not want to use .prop("src") instead of .attr().

Jquery/javascript fade in each element?

By default image and text will fade in one after another once there are loaded, but is there a way to have a fading effect added on "each" element once there are loaded?
I can load the element using the code below:
$("#element,#element2,#element3,#element4").fadeIn("slow");
but the downsides are:
I have to specify all the elements in the page, #div1,#div3,#container2.....
Also the elements can only fade in once the page finish loading all together,but what I want is fade in the elements before all the html finishes loaded.
Is it possible?

I would give each element a specific class, then reference it with $(".whatever"). You also will probably check out $.each(), which iterates through objects. To fade in as the page loads, you would need to place the code, or call the function outside the document ready(), somewhere near the beginning of the html.

you should use class attribute for the elements. You can access and control all the elements which have a particular class, you need not specify the id of each and every element. Here is a demo JSFIDDLE for you :
HTML:
<input type="button" id="btn_fade_out" value="Fade Out">
<input type="button" id="btn_fade_in" value="Fade In">
<br>
<div class="my_class">Element 1</div>
<div class="my_class">Element 2</div>
<div class="my_class">Element 3</div>
<img src="abc.png" height="50px" width="50px" border="1" class="my_class"></img>
JS:
$('#btn_fade_out').click(function(){
$('.my_class').fadeOut(1000);
});
$('#btn_fade_in').click(function(){
$('.my_class').fadeIn(1000);
});

The best way to do this would be having a class in common for all the elements you want to fade on load
and then use
$('.class').fadeIn(1000);
$('.class').fadeOut(1000);

Jquery select single item for fadeIn

Learning jquery.
Currently I have this bit of code:
$(document).ready(function() {
$('.portfolio img').mouseover(function() {
console.log('hover succes');
$('.thumbnail-overlay').fadeIn();
}).mouseout(function() {
$('.thumbnail-overlay').fadeOut();
})
});
Obviously not ideal since I have a .portfolio section with images but the effect is applied to all images at once. How do I only get the currently hovered item selected for the effect?

To be able to do this make sure the single img element and .thumbnail-overlay both have a common parent element.
Like this (where the parent is .portfolio):
<div class="portfolio">
<div class="thumbnail-overlay"></div>
<img>
</div>
Now you can access the .thumbnail-overlay using $(this).closest('.portfolio').find('.thumbnail-overlay')
OR make sure the img element is a child of .thumbnail-overlay.
Like this:
<div class="portfolio">
<div class="thumbnail-overlay">
<img>
</div>
</div>
Or this:
<div class="thumbnail-overlay">
<div class="portfolio">
<img>
</div>
</div>
And then get the .thumbnail-overlay using $(this).closest('.thumbnail-overlay').

function work without class that call for function

I have two classes and a function that works with one of them
$('.div-image').click(function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
and html something like:
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
Why after first click on the image or (div .div-image) my class div-image is changing to div-image-big. But if we click once more the function $('.div-image').click(function(){...} will execute again. The question is why so? I don't need this behavior. I want that this function work only when class is div-image not div-image-big. Thanks.

The event handler is bound on the element, not the class. Which elements it is bound to is decided based on the class they have at the time that the event is bound, so changing the class later doesn't change which elements have the event handler.
If you want the event handler to react to the class, you should bind a delegate to the a parent element. That way the event bubbles to the parent element, and the delegate handler will check for the class at that moment. Example:
HTML:
<div class="image-container">
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
</div>
Javascript:
$('.image-container').on('click', '.div-image' ,function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});