give unique id to append child in java script DOM element - javascript

I just create multiple div and append in java script but I also need to give unique id to all append child so later I can change color of any div.
my view
<div class="main" style=" background-color: white">
<div class="first">
<div class="box"></div>
<div class="box1"></div>
</div>
<div class="2nd">
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="third">
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>
<script>
for(var i = 0; i< 5; i++)
$(".first").append("<div class='box'></div><div class='box1'></div>");
for(var i = 0; i< 5; i++)
$(".2nd").append("<div class='box2'></div><div class='box3'></div>");
for(var i = 0; i< 5; i++)
$(".third").append("<div class='box4'></div><div class='box5'></div>");
</script>
Or is there any better method to achieve that?

You can use HTML DOM command .querySelectorAll() to return a list of children that match a given attribute. For example if you give your parent div an ID: id="mainDiv", and all the children divs the same class: class="childDiv", you can then do the following:
var mainDiv = document.getElementById("mainDiv");
var childrenDivs = mainDiv.querySelectorAll(".childDiv");
// childrenDivs is now a list containing all of your sections which you can reference using an index
// Eg...
childrenDivs[0].append();

Related

Target children within "this" parent

Assume I have 2 groups of divs -- both with click buttons, which when clicked, it will change the text content of the child within that group.
How can I accomplish that with pure javascript?
Thanks in advance
HTML
<div class="parent">
<button>Click</button>
<div class="child">Test1</div>
<div class="child">Test4</div>
</div>
<div class="parent">
<button>Click</button>
<div class="child">Test2</div>
<div class="child">Test5</div>
</div>
Javascript
var button = document.querySelectorAll("button");
for(i = 0; i < button.length; i++){
button[i].addEventListener("click", function(){
var parent = document.querySelectorAll(".parent");
var child = parent.querySelector(".child:nth-child(2)");
this.child.textContent = "success"; //just made up to show what I'm trying to accomplish
});
}
Assuming that you want to change only the first div element inside parent, here's one approach:
var button = document.getElementsByTagName("button");
Array.from(button).forEach(v => v.addEventListener('click', function() {
this.parentNode.children[1].innerHTML = 'success';
}));
<div class="parent">
<button>Click</button>
<div class="child">Test1</div>
<div class="child">Test4</div>
</div>
<div class="parent">
<button>Click</button>
<div class="child">Test2</div>
<div class="child">Test5</div>
</div>
Simply use the this keyword to figure out which button is clicked, then get its .parentNode and afterwards its .children, select the second one ([1]) and change the text, like so:
var button = document.querySelectorAll("button");
for(i=0; i < button.length; i++) {
button[i].addEventListener("click", function() {
this.parentNode.children[1].innerHTML = 'success';
});
}
<div class="parent">
<button>Click</button>
<div class="child">Test1</div>
<div class="child">Test4</div>
</div>
<div class="parent">
<button>Click</button>
<div class="child">Test2</div>
<div class="child">Test5</div>
</div>

How to loop child divs parent by parent with respect to the horizontal level in jquery?

<div class="row">
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
</div>
<div class="parent">
<div class="child">child4</div>
<div class="child">child5</div>
<div class="child">child6</div>
</div>
<div class="parent">
<div class="child">child7</div>
<div class="child">child8</div>
<div class="child">child9</div>
</div>
<div class="parent">
<div class="child">child10</div>
<div class="child">child11</div>
<div class="child">child12</div>
</div>
<div class="parent">
<div class="child">child13</div>
<div class="child">child14</div>
<div class="child">child15</div>
</div>
<div class="parent">
<div class="child">child16</div>
<div class="child">child17</div>
<div class="child">child18</div>
</div>
</div>
I have sortable divs and i want to save the order of divs. But if i use jquery each function it loops parent divs and passing another parent after taking all childs of it vertically.What i am trying to do is getting child1,child4,child7,child10.. and so on. If we think this as a table i want to take values of cell row by row but jquery each doing this column by column.
The output that i want is 1,4,7,10,13,16,2,5,8,11,14,17,3,6,9,12,15,18
here is code in fiddle
Please check demo
var arr=[];
var count = $(".parent")[0].children.length;
for (var i = 0 ; i < count ; i++){
$(".parent").each(function(){
arr.push($(this.children[i]).text())
});
}
console.log(arr)
Please check this code made for you and let me know, If it's working for you or not.
var cnt = 0;
$(".parent:first-child .child").each(function () { cnt++; });
for (var i = 1; i <= cnt; i++) {
$(".parent").each(function () {
console.log($(this).children('.child:nth-child(' + i + ')').html());
});
}

Simplify the html element into js

I am making bunch of elements that look like the same
I have
<div id="e1" class="e1">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
<div id="e2" class="e2">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
They are almost the same and I have several e3 and e4 div...
MY question is if there are anyways to reduce the codes and create them in js with an object (or better approach).
Would anyone gives me a hint? Thanks a lot!
jsFiddle Demo
You are going to need to get some iteration parameters, and then make a function which iterates based on those parameters to create these html elements. The primary way do create an html element is
document.createElement("tagname");
and then you are going to need to append them in the order you wish. Once they are done, you can append them to an element on the screen. Avoid appending inside of a loop. Even if you create a lot of elements, they will render quickly if they are only appended onto the screen once instead of each time an element is created.
Here is a simple example:
<div id="contentZone"></div>
<script>
var c = document.getElementById("contentZone");
var content = document.createElement("div");
for( var i = 0; i < 3; i++ ){
var d = document.createElement("div");
d.innerHTML = i + ") Hello :D";
content.appendChild(d);
}
c.appendChild(content);
</script>

How to reach HTML child notes using JavaScript

I have a layout like this and I need to reach the AreaForMapsn nodes and hide them
This is my HTML:
<div id="layout1" class="layout1_wrapper">
<div class="grid">
<div class="block">
<div id="AreaForMaps1" name="AreaForMaps1">
<div id="googlemaps1">
</div>
</div>
</div>
</div>
<div class="grid">
<div class="block">
<div id="AreaForMaps2" name="AreaForMaps2">
<div id="googlemaps2">
</div>
</div>
</div>
</div>
<div class="grid">
<div class="block">
<div id="AreaForMaps3" name="AreaForMaps3">
<div id="googlemaps3">
</div>
</div>
</div>
</div>
</div>
JavaScript:
<script>
document.getElementById("Button").onclick = function(){
//need to reach all AreaForMapsXXX divs and hide them
var myDiv = document.getElementById( "layout1" );
var children = document.getElementById(layout1).childNodes;
for(i=0; i<children.length; i+=3) {
document.getElementById(children[i].id).style.display = "none";
}
}
</script>
One possible way is to add a class, say "AreaForMaps", to all of them and then simply use document.getElementsByClassName (or jQuery or whatever you're using).
There are several ways to go about it. Here's one way.
document.getElementById("Button").onclick = function(){
var myDiv = document.getElementById( "layout1" );
var divs = myDiv.getElementsByTagName("div");
for(i=0; i<divs.length; i++) {
if (divs[i].id.indexOf("AreaForMaps") === 0)
divs[i].style.display = "none";
}
}
Your code was only targeting nodes that are immediate children of "layout1", and was including text nodes (the tab and newline characters are represented as nodes in the DOM).
This code gets all div elements that descend from "layout1", and verifies that the first part of their ID starts with "AreaForMaps" before hiding it.
If the list of browsers you support only include IE8 and higher, you can do this instead:
document.getElementById("Button").onclick = function(){
var divs = document.querySelectorAll( "#layout1 div[id^=AreaForMaps]" );
for(i=0; i<divs.length; i++)
divs[i].style.display = "none";
}

How do I select a specific double-nested element inside a div without jquery?

I am using a script called swipeview to put multiple instances of a gallery on a page. It generates the structure like this:
<div id="slider-1">
<div id="swipeview-slider">
<div id="swipeview-masterpage">
<img src="images/01.jpg" id="one"/>
</div>
<div id="swipeview-masterpage" class="swipeview-active">
<img src="images/02.jpg" id="two"/>
</div>
</div>
</div>
<div id="slider-2">
<div id="swipeview-slider">
<div id="swipeview-masterpage">
<img src="images/01.jpg" id="one"/>
</div>
<div id="swipeview-masterpage" class="swipeview-active">
<img src="images/02.jpg" id="two"/>
</div>
</div>
</div>
The only thing that is unique to each image is the top-level div ID (slider-1, slider-2).
Without using jQuery, how can I get the ID of each separate image within the 'swipeview-active' class?
With jQuery I would select them with something along these lines:
$('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img ').attr('id');
How can I do achieve this in regular js?
First of all: IDs must not start with a digit.
The dot-selector selects elements by class name. Use class=.. instead of id=....
Corrected code, using document.querySelectorAll (demo: http://jsfiddle.net/rGAkm/3/).
var images = document.querySelectorAll('#slider-1 > .swipeview-slider > .swipeview-masterpage .swipeview-active > img[id]');
var len = images.length;
var output = document.getElementById('output');
for (var i=0; i<len; i++) {
var image = images[i];
output.appendChild(image);
}
Replace #slider-1 with [id^="slider-"] if you want to select all images in this structure, which is a child of id="slider-1", id="slider-2", ...
Probably not the most elegant solution, but it works. I replaced the img tags with span tags for demonstration. I also gave the last 2 span tags a different id, and added one extra, to show it working on both root slider divs for any number of spans (images). Hope it helps.
http://jsfiddle.net/vNqhd/3/
html:
<div id="slider-1">
<div id="swipeview-slider">
<div id="swipeview-masterpage">
<span id="one">img1</span>
</div>
<div id="swipeview-masterpage" class="swipeview-active">
<span id="two">img2</span>
</div>
</div>
</div>
<div id="slider-2">
<div id="swipeview-slider">
<div id="swipeview-masterpage">
<span id="three">img3</span>
</div>
<div id="swipeview-masterpage" class="swipeview-active">
<span id="four">img4</span>
</div>
<div id="swipeview-masterpage" class="swipeview-active">
<span id="five">img5</span>
</div>
</div>
</div>
<button onclick="myfunc('slider-1');">button</button>
<button onclick="myfunc('slider-2');">button</button>
<div id="msg"></div>
js:
function myfunc(divID){
var myVar = document.getElementById(divID);
var imgIDs = [];
var counter = 0;
var str = "";
//walk the DOM from a root div and look for img/span tags
//and store their IDs
while(true){
if(myVar === undefined){ break; }
if(myVar.getElementsByTagName('div').length > 0){
myVar = myVar.getElementsByTagName('div')[0];
continue;
} else if(myVar.getElementsByTagName('span').length > 0){
imgIDs.push(myVar.getElementsByTagName('span')[0].id);
counter++;
myVar = myVar.parentNode.getElementsByTagName('div')[counter];
} else { break; }
}
//display results
for(var i = 0; i < imgIDs.length; i++){
str += imgIDs[i] + "<br/>";
}
document.getElementById('msg').innerHTML = str;
}

Categories