Develop Reference

Get index of child element which has been clicked

I want to attach event listener to all img-frame classes and I get which element (by index) inside the parent has been clicked:
$('.img-frame').each((i, img) => {
$(img).on('click', pictureClicked);
});
function pictureClicked(e) {
console.log(e.currentTarget)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="three-image-container">
<img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972">
<img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a">
<img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560">
</div>
So if the first one has been clicked I want 0 and ...
How can I do this?

You want to delegate the event to save on handlers:
$('.three-image-container').on('click', 'img', pictureClicked);
function pictureClicked(e) {
console.log($(e.target).index())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="three-image-container">
<img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972">
<img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a">
<img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560">
</div>

I think it should help you :)
$('.img-frame').each((i, img) => {
$(img).on('click', pictureClicked);
});
function pictureClicked(e) {
console.log($(e.currentTarget).index())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="three-image-container">
<img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972">
<img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a">
<img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560">
</div>

How to get link from an element and add to all elements of parent element using JavaScript

I have many divs with a class and every div contains diferent elements including a link.
what I want is to get the link and add it to all Elments of parent div such as img, headline etc. (using JavaScript)
Ex:
.myClass{
background-color:red;
display:inline-block;
width:150px;
overflow:hidden;
}
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link1
</div>
</div>
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link2
</div>
</div>

This is the fastest
Note I use function where I want to get at this or $(this)
$(function() { // on page load
$(".ecs-event").on("click", function() { // click any ecs-event container
location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>
Plain JS
window.addEventListener("load", () => { // on page load
[...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event
div.addEventListener("click", function(e) { // add a click handler
location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark
})
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>

jQuery mouseout effect is not working.!

I am working on a slider, when mouse hovers over logo the details will show, and when mouse hovers out from its parent div it should hide.
jQuery('.st_inner img').mouseover(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function() {
jQuery('#spon_detail').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://placehold.it/200x50">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>

You forgot to add the class on img element. There is no element using sponsor_thumb class
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function(){
jQuery('#spon_detail').fadeOut();
});
.key_val{
width : 400px;
height : 400px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img class="sponsor_thumb" src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail" style="display:none">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>

Not sure what you are trying to achive but what you might be missing is hiding the element before you want to fade it in
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function(){
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>

I think you missed to add .st_inner img on mouseout function.
jQuery('.st_inner img').mouseenter(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function() {
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://dummyimage.com/300.png/09f/fff">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>
You can also check this https://jsfiddle.net/a6ekejz5/1/
Hope this will help you.

zoom each image using java script

i have a main div under which i have three different div, each sub div contain image and text. i want to zoom image of that particular sub div to scale(1.1) whenever i hover on a that sub div. for now when i hover on any sub div all the three images of all sub div are scaled.
html for my code is
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>
</div>
and jquery is
$(".sub-div").each(function(){
$(this).hover(function(){
$('.img').css('transform','scale(1.1)');
},function(){
$('.img').css('transform','scale(1.0)');
});
});

If you absolutely have to use Javascript, use the selector this :
$(".sub-div").hover(function(){
$('.img',this).css('transform','scale(1.1)');
},function(){
$('.img',this).css('transform','scale(1.0)');
});
But you can do the same with CSS :
.sub-div:hover .img{
transform: scale(1.1);
}
Working JSFiddle here : https://jsfiddle.net/26zdf038/

Why jquery? .simply do with css :hover
.sub-div img{
transition:all 0.2s ease-in;
transform:scale(1.0);
width:100px;
height:100px;
}
.sub-div:hover img{
transform:scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abz</p>
</div>
</div>

Try this It will help you,
div:hover .picture{
transform: scale(1.1);
}
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div >
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>

You don't need to loop with each. Just assign a hover event for .sub-div
Use $(this) to refer to the current object you interact with and find img inside of it.
$(".sub-div").hover(function(){
$(this).find('.img').css('transform','scale(1.1)');
},function(){
$(this).find('.img').css('transform','scale(1.0)');
});
.sub-div {
float: left;
width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abz</p>
</div>
</div>

The problem is your selector for the image selects all the images, while you have to select only the child one:
$(".sub-div").each(function() {
$(this).hover(function() {
$(this).find('.img').css('transform', 'scale(1.1)');
}, function() {
$(this).find('.img').css('transform', 'scale(1.0)');
});
});
However in that case I would recommend you to use CSS because of performance:
.sub-div img { transition: 0.3s ease }
.sub-div:hover img { transfrom: scale(1.1) }

Edit css of "item" when clicking on corresponding "btn"

So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.

Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>

JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.

Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.

See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}

Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>