We Keep Coding

Is there a way to add different Id's to multiple elements with Javascript?

Let's say I have
<iframe> id="iframeid"
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</iframe>
Is there a way to add unique Id's to the divs using javascript?
For example
<iframe> id="iframeid"
<div>id="divid1"</div>
<div>id="divid2" </div>
<div>id="divid3" </div>
<div>id="divid4" </div>
</iframe>

You can return all the div elements with document.getElementsByTagName. This return a NodeList (of div in this case) that you can access with bracket notation (or item method, it's the same) that return the Element Node. You can set its attribute id with .id=value or setAttribute(id,value). In my example I set the div elements with id=id0 id=id1 and so on.
let myDivs = document.getElementsByTagName("div");
for(let i=0 ; i<myDivs.length ;i++)
myDivs[i].id = `id${i}`;
Furthermore note that document.getElementsByTagName("div") returns all the div in the page, if you want only the div of an element, for instance an iframe element with id=myiframe you can do:
document.getElementById("myiframe").getElementsByTagName("div");
Also note that this method detects all the div in the subtree, it is not limited to direct children

get a href attribute and set this attribute to other div

I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.

You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});

(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ

First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.

Take the src of a common class div

<div class="e1">
<p><img alt="" src="/images/site/pr1.png" /></p>
</div>
<div class="e1">
<p><img alt="" src="/images/site/pr2.png" /></p>
</div>
<div class="e1">
<h1> My new h1 </h1>
</div>
How is it possibe to take the content of img src element of the first two div tag which class e1?

Simply use the querySelectorAll method on document. You can then map the returned NodeList to an array of src attributes.
var images = document.querySelectorAll('.e1 img[src]'),
sources = Array.prototype.map.call(images, function(img) {
return img.src;
});
I've used the above selector '.e1 img[src]' to make sure that the returned NodeList only has images with src attributes.
JSFiddle Demo ~ http://jsfiddle.net/u9Lkada3/1/
Don't forget! You need to run the script after the elements exist in the document. The easiest way to ensure this is to put your script at the end, just before the closing </body> tag.

jquery custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear

When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')

Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')

Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.

You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});

give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

Closest previous element with certain ID (with prev())?

I have a big div wit a lot of smaller divs within it. Say,
<div id="parent">
<div id="child1">
</div>
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child1">
</div>
<div id="child1">
</div>
</div>
If I'm currently at the last 'child1', how dow I get to the top most child1 with prev()? For me it breaks when it reaches 'child2'.

First of all your HTML markup is invalid. There shouldn't be more that one element with the same ID in a document.
Read Element identifiers: the id and class attributes
id:
This attribute assigns a name to an
element. This name must be unique in a
document.
class:
This attribute assigns a class name or
set of class names to an element. Any
number of elements may be assigned the
same class name or names. Multiple
class names must be separated by white
space characters.
You can use the parent and :firstchild to get the first element inside your current parent element.
You can use something like this if you are currently at any child of element 'parent'
$(this).parent().find("div:first-child");

I think you want this:
$(this).prevAll('.child1').eq(0);

$(this).closest('.parent').find('.child1:first')
I changed to classes, because you really should only ever have one element of any given ID in a page