Develop Reference

AppendChild in for loop adds every second child?

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>

use innerHTML to select class only if it is in a parent 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
}

Add different texts to divs with same id using javascript

I have 5 divs with id="correctAnswer". I have an array of 5 elements. How to add these 5 elements in 5 divs. I have this logic.
var answers =["David Bowie","AM","Australia","Boneface","Sound City"];
for (i=1; i<=numQues; i++) {
document.getElementById("correctAnswer").innerHTML="correctanswer:"+answers[i-1];
}
<div id="correctAnswer"></div>
</div>

First of all, never use same IDs. NEVER. Use classes instead. It should go like this:
<div class="correctAnswer"></div>
<div class="correctAnswer"></div>
<div class="correctAnswer"></div>
<div class="correctAnswer"></div>
<div class="correctAnswer"></div>
<script>
var answers =["David Bowie","AM","Australia","Boneface","Sound City"];
for (i=1; i<=numQues; i++) {
document.getElementsByClassName("correctAnswer")[i-1].innerHTML="correctanswer:"+answers[i-1];
}
</script>

Javascript finding parent or sibling

I have this html code:
<div class="comment" id="7" >
<div style="display:inline-block">
<img style="width:64px;height:64px" src="http://origin.black-marketplace.net/content/images/users/1.jpg"><br>
<div class="rating" style="background-position:0px -10px" title="1 stelle su 5"></div>
</div>
<div style="display:inline-block;float:right;width:172px;height:75px">
<b>Xriuk</b>
<div style="font-size:10px;color:#BEBEBE;line-height:10px">ha comprato</div>
<span class="ellips games">mkx brteshtnx</span>
</div>
<span style="font-size:12px;height:50px;width:236px;display:block" class="ellips">sdjchsdui edi0ufwuèè+eè+è+èàùiek ci0hxjomwui9vjko'asdhvfyu8rk cxi0ehfuioweju9cwej icjnweuceioncuiasn cu9wecji0wejucm vuiom fiwefdoeqr hg wgtehwhwtwghrh</span>
<a class="url" style="float:right;font-size:11px;display:none" href="7">Continua a leggere -></a>
</div>
Basically all the elements with the class ellips get ellipsed if overflow the size of the box, what I want to do is to display the if any of two span contains the string "...".
What I already did:
$(".ellips").ellipsis();
var text = document.getElementsByClassName("ellips");
if(text){
for(var i = 0; i < text.length; i++){
if(text[i].innerHTML.indexOf("...") != "-1"){
***HERE***
}
}
}
In ***HERE*** I need to put a code which returns the child element "#url" of the top parent element ".comment" (the top parent element must correspond to the current ".ellips" selected).
Any help?
Thanks!

Try
$(".ellips").ellipsis();
$('.comment .ellips').each(function () {
if (this.innerHTML.indexOf("...") != "-1") {
var $url = $(this).closest('.comment').find('.url');
//here $url refers the element with url class under the same .comment element
}
})

Try this:
$(text[i]).closest('.comment').find('a.url')

Hide DIVs with the same name using Javascript

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";