We Keep Coding

Insert a descendant img element's src attribute into parent element's href attribute

I have the following html:
<a href="#">
<img src="img-1" />
</a>
<a href="#">
<img src="img-2" />
</a>
<a href="#">
<img src="img-3" />
</a>
What I am trying to do is for each one of the links I need to retrieve its child img src and insert that src into the href respectively.
So the end result would look like this:
<a href="img-1">
<img src="img-1" />
</a>
<a href="img-2">
<img src="img-2" />
</a>
<a href="img-3">
<img src="img-3" />
</a>
Thank you.

Iterate over each of the a elements that have img descendants, and grab the corresponding src attribute:
$('a:has(img)').each(function () {
this.href = $(this).find('img').attr('src');
});
Alternatively, you could also do this without jQuery:
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (a) {
var img = a.querySelector('img');
a.href = img !== null ? a.querySelector('img').getAttribute('src') : a.href;
});

JavaScript solution: (I like native solutions 😉)
var images = document.getElementsByTagName("img")
for(var i = 0; i < images.length; ++i) {
if(images[i].parentElement && images[i].parentElement.tagName === "A")
images[i].parentElement.href = images[i].src
}
<a href="#">
<img src="img-1" />
</a>
<a href="#">
<img src="img-2" />
</a>
<a href="#">
<img src="img-3" />
</a>
It will get all Image-Elements in your document, and then apply its src to it's parents href attribute

javascript
var all_images=document.getElementsByTagName('img')
for(var i=0;i<all_images.length;++i){
all_images[i].parentNode.href=all_images[i].src;
console.log(all_images[i].parentNode.href)
}

jQuery append an img to every div

I am trying to display a thumbnail image with every thumb class, but currently I am getting the output below where the images are looping inside the href instead. The order of div, href and img must not change. It looks something like this jsfiddle but this isn't fully working of course...
currently getting:
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
<img src="">
<img src="">
</div>
required output:
<div class ='thumb'>
<a href="#" rel="1">
<img src=>
</a>
</div>
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
</div>
my loop:
var thumbnails = [];
$.each(data.productVariantImages,function(key, val){
thumbnails.push(val.imagePath);
});
for(var thumb in thumbnails) {
$('.thumb').append($('<img>').attr({
"src":[thumbnails[thumb]]
}));
}
am i looping it wrongly?
edit:
The thumbnails are part of a dynamic gallery where basically every time a user choose a different option in a dropdown list, the sources for the thumbs are supposed to change accordingly.
current html:
<div class="thumbnail"><?php
foreach($skuDetails['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<div class="thumb">
<a href="#" rel="1">
<img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
</a>
</div> <?php }}?>
</div>
sample array of thumbnails:
["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]
sample output:
<div class="thumbnail">
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
</div>

You need to use .each function on .thumb. Something like:
$(document).ready(function(){
$('.thumb').each(function(){
$(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
});
});

your loop is focused on wrong element. You append img tag to the thumb class. So, the img tags inside the same element. You should create div has thumb class inside the loop, and append it to the thumbnail div. That must like
var div = $(".thumbnail");
$.each(imageArray, function(index, value){
var elem = "<div class='thumb'><a href='#' rel='1'></div>";
div.append($elem);
$('.thumb').append("<img />").attr("src", value);
});
It may be wrong but you should watch the thumbnail element. I cannot write the code to test. But I think the logic must be like this.

If you want that exact structure, I made a demo using plain JavaScript. Enter a number and the thumbClone() function will generate that many. You could probably adapt this function with your existing code easily. I'm in rush, it probably needs refactoring, sorry. :-\
DEMO
function thumbClone(qty) {
var main = document.getElementById('main');
var aFig = document.createElement('figure');
var aLnk = document.createElement('a');
var aImg = document.createElement('img');
aLnk.appendChild(aImg);
aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
aFig.appendChild(aLnk);
aLnk.setAttribute('rel', '1');
main.appendChild(aFig);
aFig.className = "thumb";
console.log('qty: ' + qty);
var thumb = document.querySelector('.thumb');
for (var i = 0; i < qty; i++) {
var clone = thumb.cloneNode(true);
thumb.parentNode.appendChild(clone);
}
}

You need to use each loop which will get each class rather than getting only one class below is syntax of each loop
$(selector).each(function(){
// do your stuff here
)};
in your case
$('.thumb a').each(function(){
// do your stuff here
$(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};

Looks like you need to create the entire div structure for each image.
Lets create the below structure dynamically using the max length of the image array and add the image src .
var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) {
thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
thumbDivEnd;
//Here you can append the thumbDiv to the parent element wherever you need to add it.
}

add content through javascript

I am trying to create a page where when you click on any of the three images. It inserts the content into the empty div above the image links.
Here is my javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />);
return false;
});
});
</script>
and this is the HTML it is to effect:
<div class="deal_content">
</div>
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</div>
I wish the new image to be put in the deal_content class div.

In your append method, if you put double quotes around the HTML and replace the current quotes with single quotes, it should work. Append takes a string or a JQuery selector, not markup.

You need to make the element a string in order to pass it through append
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />');
return false;
});
});

Considerting this is what you want:
I wish the new iamge to be put in the deal_content class div.
You are almost there:
In the Javascript that you have:
$(document).ready(function () {
$('img').click(function () {
$('.deal_content').append();
return false;
});
});
you need a html() instead of append(). And insert a img tag, and grab the srcfrom the image thatw as clicked on.
$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");
See http://jsfiddle.net/nivas/PA63e/

$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this );
});
or if you want to duplicate the image:
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this.cloneNode() );
});
is that what you want? This way it will only move the images that are inside imagelink element

href attribute not working

HTML:
<a id="Change">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
Javascript:
<script>
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
return false;
});
});
</script>
Why is the href attribute not changing? when the src one is?!

<a id="Change" href="#">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
This one should work. I just removed the return false statement
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
var href = $(".maneA").attr('href');
alert(href);
});
});
http://jsfiddle.net/UwVRX/

How to simulate on href with ref

I try to simulate a JS click on UIWebView (i can do this by document.getElementById('MyId'));
But in this exemple, we found a REF element, how to get it to click?
<a href="javascript:void(0);" id="details" ref="1" title="|title" class="detail_button tips">

document.getElementById('MyId').onclick=function(){
var ref = this.getAttribute('ref');
//the ref is your value
if(ref == 1){
this.click();
}
}

you can access the ref value attribute like this
document.getElementById('MyId').getAttribute('ref');

Say you have these links
<a href="javascript:void(0);" id="MyId" title="title" >1</a>
<a href="javascript:void(0);" id="MyId" ref="1" title="title" >1</a>
<a href="javascript:void(0);" id="MyId1" ref="1" title="title" >2</a>
<a href="javascript:void(0);" id="MyId2" ref="1" title="title" >3</a>
<a href="javascript:void(0);" id="MyId3" ref="1" title="title" >4</a>
and you whant only the ones that have the ref attribute set to some value to add a click event? well if this is the case this code will do this for you.
aElements = document.getElementsByTagName("a");
for (i = 0; i < aElements.length; i++) {
if (aElements[i].hasAttribute("ref") && aElements[i].hasAttribute("ref") == 1) {
aElements[i].onclick = function () {
alert(2);
}
}
}