We Keep Coding

Check which element was clicked

I currently have some images and when they are clicked, it will pop up with an alert like so:
$('.image').click( function() { alert( 'Clicked it!' ); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
How can I modify this so that if the first image was clicked it would alert with "1 was clicked" and if the second image was clicked it would alert with "2 was clicled" and so on...

You can use the JQuery .index() method and concatenate the index of the clicked div to the string in your alert.
Since the first index of an array in JS is 0, you will also have to add 1 to the returned index if you want to start at 1. Try the snippet below:
$(document).ready(function() {
$('.image').click(function() {
alert($(this).index() + 1 + ' was clicked!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>

How to get images alt using jquery?

I'm trying to add data-title and data-lightbox and get Images alt inside.
the problem is, i have a similar outputs, from first image alt only!
How can we fix it?
jQuery(document).ready(function($) {
var imagesalt = $('.box a img').attr('alt');
$(".box a").attr("data-title", imagesalt);
$(".box a").attr("data-lightbox", imagesalt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-title="text 1" href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-lightbox="text 1" href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
I tried writing the code more than one way, but not useful
Thanks

Your query is ambiguous, that's why!
When you request the "alt" attribute with $(".box a img").attr("alt"), you're taking in many objects, sure, but attr() is returning only the first result.
In pure jQuery, you'd do it with .each():
$(".box a img").each(function(){
var imageAlt = $(this).attr("alt");
var parent = $(this).parent();
parent.attr("data-lightbox", imageAlt);
parent.attr("data-title", imageAlt);
});
That should give you the behaviour you expect.

Iterate over each of the divs with the class of 'box' - then find the image within it, get the alt text of that and apply it as the data attribute of the div. Note I put in a console.log to demonstrate the alt text is being found correctly. Ypu can use the console inspector to see that the data attribute is being applied to the divs correctly.
$(document).ready(function(){
$(".box").each(function(){
var imageAlt = $(this).find('img').attr('alt');
$(this).attr("data-title", imageAlt);
console.log(imageAlt);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>

Try this:
$('.box a img').each(function(){
$(this).parent().find("a").attr("data-title", $(this).attr("alt");
$(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
})

The .attr() method gets the attribute value for only the first element in the matched set.
But, the .attr() method sets the attribute value for every element in the matched set.
enter link description here

Delete an element based on the child image name through JQuery

I plan on deleting all instances of an entire <div> from the page, if it has an image with a specific name. I am not sure if it's even possible with JQuery.
Here is my HTML:-
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last"><img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""></li>
</ul>
</div>
</div>
</div>
What I am hoping is, that all the <div> on my page with a class of jk-content-module__image should have the child <div style="display: none;"> ... </div> removed, if there is an <img> with a src of blank_0.png in it.
Hence if the image has a src of blank_0.png present, I want the entire <div style="display: none;"> to be removed.
I hope I am clear.
I'll be grateful if you could assist.

You can use .filter() on ".jk-content-module__image" elements with parameter :has(img[src=blank_0.png]), .find() with parameter "div[style*='display: none']" note space character before none which matches current html, .remove()
$(function() {
$(".jk-content-module__image").filter(":has(img[src*='blank_0.png'])")
.find("div[style*='display: none']").remove()
})
jsfiddle https://jsfiddle.net/ks6b596n/1/

You can do like this:
$(document).ready(function() {
var elements = $(".jk-content-module__image");
elements.each(function(i, obj) {
if ($(obj).find("div[style*='display: none'] img").attr("src").indexOf("blank_0.png") > 0) {
$(obj).find(".hiddenDiv").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div class="hiddenDiv" style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<a href="http://thesite.com/sites/default/files/default_images/blank_0.png" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title="">
</a>
</li>
</ul>
</div>
</div>
</div>

maybe something like this with JQuery?
//get the src for your image
var imgSrc = $(".jk-content-module__image div img").attr('src').toLowerCase()
//see if it contains blank_0
if(imgSrc.indexOf('blank_0.png')>-1)
{
//if true, remove the div
$(".jk-content-module__image div")
}

You can use this:
$(".jk-content-module__image div:hidden").filter(function() {
return $(this).find('img').attr('src').indexOf('blank_0.png') !== -1
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
visible image
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""> hidden img
</li>
</ul>
</div>
</div>
</div>
Fiddle

Using jQuery:
$('img[src~=/blank_0.png]').closest('div[style*="display: none"]').remove();
In English: Find all img elements who's src attributes end in /blank_0.png. From there, find their closest ancestor elements who's style attributes contain display: none. Remove those ancestor elements.
May need to adjust the spacing in display: none as this needs to be exactly as it appears in the original.
In javascript:
[].slice.call(document.getElementsByTagName('IMG')).filter(function(e,i,a){
return e.src.endsWith('/blank_0.png');
}).forEach(function(e,i,a){
var t = e.parentNode;
while(t != null && (t.nodeName != 'DIV' || t.style.display != 'none')){
t = t.parentNode;
}
if(t != null && t.parentNode != null) {
t.remove();
}
});

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery

$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/

<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

JS- How to change image on Mouseout

I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.

I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.