We Keep Coding

how to get query selector data attribute in javascript?

I have a custom JS function that creates/inject a custom link into all elements in the page when it loads.
Before manipulation:
<div class="myimagediv">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</div>
and now this custom function manipulates the element:
[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
old_html = elem.innerHTML;
new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
elem.innerHTML = new_html;
});
The newly manipulate element:
<div class="myimagediv">
<a class="customlink" href="this should be the content of my data-src" title="">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</a>
</div>
How can I get the data-src attribute from the IMG tag and inject it into my newly created custom link function?
I should use a var? and then call it, but I cannot grasp how to read the data-src and re-use it.
Any help would be very much appreciated.

Just use the getAttribute method of the image element:
var dataSrc = elem.querySelector('img').getAttribute('data-src');

Example - how to read data-* attrs in vanilla JS:
var elm = document.querySelector('any-tag')
var first = elm.dataset.whatever
var second = elm.dataset.somethingElse // camel case for multi-word
console.log(first, second)
<any-tag data-whatever="value1" data-something-else="value2" />

You just need to get it like any other attribute
<div id="test" data-myattr="toto">
</div>
alert(document.getElementById("test").getAttribute("data-myattr"));
JSFIDDLE
EDIT FROM #waldemarice:
HtmlElement contains the dataset property to get attribut prefixed by data-
<div id="test" data-myattr="toto">
</div>
alert(document.getElementById("test").dataset.myattr);
JSFIDDLE

document.querySelectorAll() example:
document.querySelectorAll('.className').forEach(elem => console.log(elem.getAttribute('interesting-attribute')));

jQuery on click redirect to child href attribute

I'm trying to link one div with the href attribute of his first <a> href.
My html looks like this
<div class="clicked">
<a class="i-want-this-href" href="target">
<img>
</a>
<a class="this-one-is-useless" href="Wrong-target">
<img>
</a>
</div>
And I have tested some different ways like this:
$('.clicked').on('click',function(){
aux= $('this:first-child').attr("href");
console.log(aux);
});
But I always get Undefined on the console. And I want to get "target" inside the first <a> element.
Any help will be appreciated!

Your selector is incorrect, you can use .find()/.children() along with :first selector
aux= $(this).find('a:first').attr("href");

Use this context along with :first-child selector
$('.clicked').on('click', function() {
var href = $(this).find('a:first-child').attr("href");
console.log(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clicked">
<a class="i-want-this-href" href="target">
<img>
</a>
<a class="this-one-is-useless" href="Wrong-target">
<img>
</a>

1) Do not use this in selectors, this needs to be passed to $ separately
2) Make sure to declare variable as local, otherwise there will be bugs.
3) Use first-of-type
$('.clicked').on('click',function(){
var aux = $(this).find('a:first-of-type').attr("href");
console.log(aux);
});

$('.clicked').on('click',function(){
aux= $(this).find('a:first-child').attr("href");
console.log(aux);
});

Wrong selector, If you want to use this in selector you should pass it separared as follows :
var aux = $('a', this).prop("href");
//Or
var aux = $(this).find('a').prop("href");
NOTE : jQuery by default will select the first occurrence.
Hope this helps.
$('.clicked').on('click',function(){
var aux = $('a', this).prop("href");
console.log(aux);
});
.clicked{
width:100%;
height:100px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clicked">
<a class="i-want-this-href" href="target">
Image 1
</a>
<a class="this-one-is-useless" href="Wrong-target">
Image 2
</a>
</div>

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.
}

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});

Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});

If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");

Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

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