I need to set z-index dynamically on every node inside div (first node - 1, second - 2, etc). When I'm trying to use the "for" loop on childNodes, I got an error "Uncaught TypeError: Cannot set property 'zIndex' of undefined". Can you please point out my mistake?
You can see the codepen: https://codepen.io/pen/
HTML + JS:
<div id="blog__images" class="blog__images">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
var images = document.getElementById('blog__images').childNodes;
for (var i = 1; i < images.length; ++i) {
images[i].style.zIndex = i;
}
Whitespace inside elements is considered as text, and text is considered as nodes. Those text nodes should be skipped.
var images = document.getElementById('blog__images').childNodes;
// console.log(images);
for (var i = 1; i < images.length; ++i) {
if (images[i] && images[i].nodeType != 3) {
console.log("My node:" + images[i].nodeName);
images[i].style.zIndex = i;
} else {
console.log("Skipping Extra node:" + images[i].nodeName);
}
}
<div id="blog__images" class="blog__images">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
Set the z-index using .style and the iteration of i on each of your elements in your loop. Example below in snippit...
images[i].style.zIndex = i; will do the trick. I have selected the elements directly using the classname, no need for childNode...
You can open your browsers console and check the CSS properties for each node after you run the code.
Console for the snippit below once run:
let images = document.getElementsByClassName('image');
let imgZIndex;
for(let i = 0; i < images.length; i++){
imgZIndex = images[i].style.zIndex = i;
console.log(imgZIndex)
}
<div id="blog__images" class="blog__images">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
You can loop over the structure like this.
var images = document.getElementById('blog__images').childNodes;
for (var img : images) {
images[img].style.zIndex = img;
}
Related
I need to wrap children element in wrap-of-parent. Before wraping add some attributes to parent and child elements. In the code described below, everything works well if the children are one below the other in a separate row, and if they are in one row, every other child is inserted into the wrap-of-parent. Why is this happening and how to fix it?
I get:
<div id="container">
<div id="parent1">
<div id="child1"></div>
<div id="child2"></div>
<div id="wrap-of-parent1">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
I need to get:
<div id="container">
<div id="parent1">
<div id="wrap-of-parent1">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
Code:
var container = document.getElementById("container");
const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in
for (let parent of parentDivs) {
// create a new div
let wrap = document.createElement('div');
wrap.id = 'wrap-of-' + parent.id;
// move the parent's children to it
let children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (children[i].nodeType === Node.ELEMENT_NODE) {
children[i].setAttribute("data", "somedata");
wrap.append(children[i]);
}}
// and append it to the parent
parent.appendChild(wrap);
}
<div id="container">
<div id="parent1">
<div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
</div>
</div>
<! - If the child elements are one below the other in a separate row it works, if they are in one row it does not work ->
If you keep moving the first (index 0) entry, it will work. You need to add an offset when the wrong nodeType is encountered to skip over those ones, and if there are no child nodes then don't process the node:
var container = document.getElementById("container");
const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in
for (let parent of parentDivs) {
// create a new div
if (parent.childNodes.length > 0) {
let wrap = document.createElement('div');
wrap.id = 'wrap-of-' + parent.id;
// move the parent's children to it
let children = parent.childNodes;
const nChildren = children.length;
let offset = 0;
for (let i = 0; i < nChildren; i++) {
if (children[offset].nodeType === Node.ELEMENT_NODE) {
children[offset].setAttribute("data", "somedata");
wrap.append(children[offset]);
} else {
offset++;
}
}
// and append it to the parent
parent.appendChild(wrap);
}
}
<div id="container">
<div id="parent1">
<div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
</div>
</div>
I would like loop each iframes tags I've on my page and replace them all with a new div and on the way delete also the parent content so the new div will be the only child:
<div id="parent">
<p>this is parent content</p>
<iframe src="http://www.example.com" id="iframe10"></iframe>
</div>
Result should be:
<div id="parent">
<div id="newdiv">this is new div</div>
</div>
Here is my code for looping all iframes on page, the problem I don't understand how I can access each iframe parent and delete its contents:
var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = 0; i < frames.length; ++i)
{
frame_id = frames[i].id;
}
Thanks
Shai
you can write it as following:
function remove_frames() {
var i = 0;
var frames = document.getElementsByTagName("iframe");
while (frames.length > 0) {
var f = frames[0];
var p = f.parentElement;
if (p) {
while (p.children.length > 0) {
p.children[0].remove();
}
p.innerHTML = "<div id=\"newdiv" + i + "\">this is new div" + i + "</div>";
i++; //increase id index
//p.appendChild(
}
}
}
<p><input type="button" value="Execute" onclick="remove_frames()" /></p>
<div id="parent">
<p>this is parent content</p>
<iframe src="http://www.example.com" id="iframe10"></iframe>
</div>
<p style="color:#6595ee">This element does not contain any sibling IFrame and must be exist in final result!</p>
<div id="parent2">
<p>this is parent2 content...</p>
<div>another element</div>
<iframe src="http://www.example.com" id="iframe20"></iframe>
<p>another element after iframe.</p>
</div>
var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = frames.length; i; --i) // the array-like object shrinks every time a frame is removed so we have to loop backwards
{
//frame_id = frames[i].id;
// get the parent element
var parent = frames[i].parentElement;
// empty it (remove all it's elements)
while(parent.firstChild)
parent.removeChild(parent.firstChild);
// add the new div
var div = /* create new div */;
parent.appendChild(div);
}
You could use the parentElement
var iframes = document.getElementsByTagName("iframe");
iframes[0].parentElement.innerHTML = `<div id="newdiv">this is new div</div>`;
<div id="parent">
<p>this is parent content</p>
<iframe src="http://www.example.com" id="iframe10"></iframe>
</div>
You can use Node.parentNode to get the parent and Node.removeChild or Element.innerHTML to delete the content.
var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = frames.length-1; i >=0; i--) {
var frame = frames[i];
if (frame.parentNode) {
var parent = frame.parentNode;
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
}
<div id="parent">
<p>this is parent content</p>
<iframe src="http://www.example.com" id="iframe10"></iframe>
</div>
i currently have the code below which searches for the class and will replace the text.
how would i tweak it so it only will replace text if the parent tag is "#thumb-hockey-top"?
window.onload = function(){
//this captures all the elements with the spec classes
var soldItems = document.getElementsByClassName('product-mark sold-out');
//this changes each element 1 by 1 to new text
for(var i=0; i<soldItems.length; i++){
soldItems[i].innerHTML = "Coming Soon";
}
}
window.onload = function(){
//this captures all the elements with the spec classes
//just use a class
var soldItems = document.getElementsByClassName('sold-out');
//this changes each element 1 by 1 to new text
//var parentnode = document.getElementById('thumb-hockey-top')
for(var i=0; i<soldItems.length; i++){
if(soldItems[i].parentNode.id=='thumb-hockey-top'){
soldItems[i].innerHTML = "Coming Soon";
}
}
};
<div id="thumb-hockey-top">
<div class="product-mark sold-out"></div>
<div class="product-mark sold-out"></div>
<div class="product-mark sold-out"></div>
</div>
Use once
window.onload = function(){
//this captures all the elements with the spec classes
var soldItems = document.getElementById("thumb-hockey-top").getElementsByClassName('product-mark sold-out');
//this changes each element 1 by 1 to new text
for(var i=0; i<soldItems.length; i++){
soldItems[i].innerHTML = "Coming Soon"
}
}
<div id="thumb-hockey-top">
<div class="product-mark sold-out"></div>
</div>
<div class="product-mark sold-out"></div>
<div class="product-mark sold-out"></div>
Use multiple times
function myF(a, b){
// a = Id of parent element
// b = Class Name of element which you want to hack
var soldItems = document.getElementById(a).getElementsByClassName(b);
for(var i=0; i<soldItems.length; i++){
soldItems[i].innerHTML = "Coming Soon"
}
}
myF("thumb-hockey-top", "product-mark sold-out");
myF("thumb-hockey-bottom", "product-unmark sold-out");
<div class="example1">
<div id="thumb-hockey-top">
<div class="product-mark sold-out">EXAMPLE 1</div>
</div>
<div class="product-mark sold-out">EXAMPLE 1</div>
</div>
<div class="example2">
<div id="thumb-hockey-bottom">
<div class="product-unmark sold-out">EXAMPLE 2</div>
</div>
<div class="product-unmark sold-out">EXAMPLE 2</div>
</div>
You can get the parent element of an element using the parentElement attribute. Then just check its id.
var soldItem = soldItems[i];
if (soldItem.parentElement.id == "thumb-hockey-top") {
// do your thing
}
I want to hide all divs with the name "mask"
This is my HTML:
<div id="first">
<div id="firsttest"></div>
<div class="one onehelp">
<div id="mask">
<div id="onetip"></div>
</div>
<div id="Div5"></div>
<div id="resultone"></div>
</div>
<div class="two twohelp">
<div id="mask">
<div id="twotip"></div>
</div>
<div id="Div6"></div>
<div id="resulttwo"></div>
</div>
<div class="three threehelp">
<div id="mask">
<div id="threetip"></div>
</div>
<div id="Div7"></div>
<div id="resultthree"></div>
</div>
</div>
I tried to hide "mask" by using the JS code below but it didn't work for all divs, just for the first one.
var hidemask = document.getElementById("mask");
hidemask.style.display = "none";
Is there a way to hide them all by using pure Javascript. No jQuery.
You shouldn't be using duplicate ID's in HTML, consider changing it to a class.
If you change id="mask" to class="mask", then you can do:
var hidemask = document.querySelectorAll(".mask");
for (var i = 0; i < hidemask.length; i++) {
hidemask[i].style.display = "none";
}
Or for browsers still in the stone age (IE7 and below), you can do:
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + 'mask' + ' ') > -1) {
elems[i].style.display = "none";
}
}
The id attribute must be unique per document. You can do what you want with a class, perhaps. So you would have multiple divs like so:
<div id="something" class="mask"></div>
Then you can do:
var divsWithMask = document.querySelectorAll(".mask");
for(var i = 0; i < divsWithMark.length; i++) {
divsWithMak[i].style.display = "none";
}
You cannot assign same ID more than once.
But you can add an attribute class to div with id "mask" E.g.:
<div id="mask-or-something-else" class="mask">...</div>
And select all elements by this class:
var hidemask = document.getElementsByClassName("mask");
for(i = 0; i < hidemask.length; i++)
hidemask[i].style.display = "none";
How to auto generate id for child div in JQuery. Please help me so can i solve problem.
there is html code i want to set ids for these so can i apply operation on these.
<div id="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I want to fit this. when click on + it should be max on complete div and when less it should be again on same possition.
If you try to create new div and assign it to it one possible solution may be:
<div id="parent">
</div>
for(var i = 0; i< 10; i++) { // suppose I append 10 divs to parent
$('#parent')
.append('<div id="myid_'+ i +'">child'+ i +'</div>');
}
DEMO
But if you've already child divs within parent then
<div id="parent">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
</div>
then one possible approach would be
$('#parent div').each(function(i) {
$(this).attr('id', 'myid_' + i);
});
According to edit
<div id="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
$('#main .child').each(function(i) {
$(this).attr('id', 'myid_' + i);
});
DEMO
Another approach would be
$('#main .child').attr('id', function(i) {
return 'myid_' + i;
});
DEMO
There is no ways to do it automatically because live() call does not support ready event
This will give the child div's ID like child-1,child-2 etc... child-n
$(function(){
var childDivs=$("#main div");
for(var i=0;i<childDivs.length;i++)
{
$(childDivs[i]).attr("id","child-"+i);
}
});
Example : http://jsfiddle.net/nsQcR/12/
(You can check the view source to see the ID's);
To follow on to thecodeparadox's response for creating new div and assigning values, if you'd like the id and other info to be taken from a hash within an array:
arry = [{name: name1, addr: addr1, id: id1}, {name: name2, addr: addr2, id: id2}, etc...]
<div id="parent">
</div>
for(var i = 0, l = arry.length; i < l; i++) {
var obj = arry[i]
name = obj.name
pid = obj.pid
addr = obj.addr
$('#parent').append('<div id=' + pid + '>' + name + ': ' + addr + '</div>');
};