The following code copies all elements given one css class, that's fine, it does render the list of elements... Now I'd like to wrap those results in HTML content, how can I achieve that?
setTimeout(function() {
var element = document.getElementById("unique_ID");
element.innerHTML = "";
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
var storednode = element.appendChild(e.cloneNode(true));
});
}, 300);
How can I wrap in HTML content each of the storednode? I've been able to apply classes: storednode.className += " another-class";, but how can I wrap the results in any HTML I want? is that possible?
Thank you for your time.
Edit:
This is what the script does.
setTimeout(function() {
var element = document.getElementById("unique_ID");
element.innerHTML = "";
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
element.appendChild(e.cloneNode(true));
});
}, 300);
#unique_ID {
border: 1px solid blue;
}
<div id="unique_ID"></div>
<div class="a_random_class">a</div>
<div class="a_random_class">b</div>
<div class="a_random_class">c</div>
<div class="a_random_class">d</div>
<div class="a_random_class">e</div>
<div class="a_random_class">f</div>
What I need is that each result, for example <div class="a_random_class">f</div> can be wrapped inside any HTML code I want, to get something like <div id="another-div" class="a-class" style="maybe:styles"><li><div class="a_random_class">f</div></li></div> This is certainly an example, but I'd like to know if that's possible... Not only copy the class elements but also append some HTML on them.
I think what you are looking for is something like
setTimeout(function () {
var element = document.createElement('div');
element.className = 'something';
[].forEach.call(document.querySelectorAll(".a_random_class"), function (e) {
var wrap = element.cloneNode(true);
e.parentNode.insertBefore(wrap, e)
wrap.appendChild(e);
});
}, 300);
setTimeout(function() {
var element = document.createElement('div');
element.className = 'something';
[].forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
var wrap = element.cloneNode(true);
e.parentNode.insertBefore(wrap, e)
wrap.appendChild(e);
});
}, 300);
.something {
border: 1px solid red;
padding: 5px;
margin-bottom: 5px;
}
.a_random_class {
background-color: lightgrey;
}
<div class="a_random_class">a</div>
<div class="a_random_class">b</div>
<div class="a_random_class">c</div>
<div class="a_random_class">d</div>
<div class="a_random_class">e</div>
<div class="a_random_class">f</div>
Related
There are 7 links in one div and 7 divs in another. Example https://jsfiddle.net/tania_poltava/2oqtr9v1/
I want, when the first link is hovered to influent on first img, adding class; and with other links.
im triing to do this - getting the number of hovered link, then looking for the div with classname with such number, and try to add new class.
<div class="links">
button1
button2
button3
button4
button5
button6
button7
</div>
<div class="rounds">
<div class="services__round--1"></div>
<div class="services__round--2"></div>
<div class="services__round--3"></div>
<div class="services__round--4"></div>
<div class="services__round--5"></div>
<div class="services__round--6"></div>
<div class="services__round--7"></div>
</div>
.rounds div {
background: grey;
width:40px;
height: 40px;
border-radius: 50%;
}
.services__round--active {
background: green;
}
jQuery(function ($) {
$(document).ready(function() {
var link = $(".links a");
var linkClass = $(link).attr('class');
var linkNumb = linkClass.replace(/[^0-9]/g,'');
var roundClass = "services__round--" + linkNumb;
$(link).hover(function(){
var round = $(roundClass).addClass('services__round--active');
// check
console.log(linkNumb);
console.log(linkClass);
console.log(roundClass);
})
})
})
EDITED: Answer for your code is;
https://jsfiddle.net/g3wjc6tz/
jQuery(function($) {
$(document).ready(function() {
var link = $(".links a");
$(link).hover(function() {
// check
$('.services__round--active').removeClass('services__round--active')
var linkClass = $(this).attr('class');
var linkNumb = linkClass.replace(/[^0-9]/g, '');
var roundClass = "services__round--" + linkNumb;
var round = $('.' + roundClass).addClass('services__round--active');
console.log(linkNumb);
console.log(linkClass);
console.log(roundClass);
})
})
})
Not the best but more simple and proper way to do it: https://jsfiddle.net/g3wjc6tz/1/
I would like to know, if there is a way to hide certain characters in string, but not replace.
So, for example
let a = 'Hallo';
let b = a.replace('a', ' ');
alert(b);
this code will alert H llo instead Hallo.
Is there any function that really hide (don't display character, but don't replace it (so, we can't see this character, but it exists still there)) ?
Extending on ibrahim mahrir's comment, you could create a hidden class as follows:
<p>Such a nifty string, wi<span class="hidden">th</span>
some l<span class="hidden">e</span>tters missing</p>
Then some javascript could do this:
<script>
var targets = document.querySelectorAll(".hidden");
function hideLetters() {
targets.style.visibility = "hidden";
}
hideLetters();
</script>
By putting it in a function like this, you could dynamically hide them. Say a user clicks a button:
<button id="hider">Hide letters</button>
<script>
var hider = document.querySelector("#hider");
hider.addEventListener("click", hideLetters);
</script>
And then a function to show them, if you like.
<script>
function showLetters() {
targets.style.visibility = "visible";
}
</script>
let div = document.getElementById("div");
let str = "Ibrahim Mahrir plays Hallo!";
div.innerHTML = str.replace(/a/g, "<span class='hidden'>$&</span>");
#div {
margin-top: 30px;
padding: 10px;
background: #fffbec;
border-bottom: 2px solid #d89d9d;
}
.hidden {
visibility: hidden;
}
#div:hover .hidden {
visibility: visible;
}
Hover over the div to see the missing characters:
<div id="div"></div>
So I need to get an array of values rendering in a selection of divs, could anyone help me as to the best way to tackle this?
I have to use javaScript.
You can add DOM elements with JavaScript by creating the element you want, setting the properties/attributes as you desire, and then appending them to the DOM (either directly to the body, or to a containing element), like so:
var arr = ["text1", "text2", "text3"];
var container = document.getElementById("container");
arr.forEach(function (text) {
var div = document.createElement("div");
div.innerText = text;
div.classList.add("div-added");
container.append(div);
});
.div-added {
padding: 10px;
border: 2px solid #333;
}
<div id="container"></div>
Alternatively, you can use jQuery, like so:
var arr = ["text1", "text2", "text3"];
var container = $("#container");
arr.forEach(function(text) {
var div = $("<div>", {
text: text,
class: "div-added"
});
container.append(div);
});
.div-added {
padding: 10px;
border: 2px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I've created a sample file that has adding and removing children elements in a mother element. The adding was successful, but I'm having a problem in removing children elements. The goal is every single click of remove button removes a child element.
var adds = document.querySelector('#add');
var remove = document.querySelector('#remove');
var section = document.querySelector('section');
var div;
adds.onclick = function() {
div = document.createElement('div');
section.appendChild(div);
div.classList.add('style');
};
// THE PROBLEM
remove.onclick = function() {
while(section.children.length !== 0) {
for(var c in section.children) {
section.removeChild(div[c]);
}
}
};
section {
display: flex;
background: #0ff;
height: 100px;
padding: 8px;
}
section > div {margin: 0 1px;}
.style {
width: 100px;
height: 100px;
background: lightgreen;
}
<button id="add">Add</button>
<button id="remove">Remove</button>
<section class="container"></section>
<br>
What's wrong with my code?
What's wrong with my code?
This line
section.removeChild(div[c]);
div could be undefined here and anyways, sections's children are not necessarily div's children
so change it to
section.removeChild(section.children [c]);
Also, while is not necessary
remove.onclick = function() {
for(var c in section.children) {
section.removeChild(section.children[c]);
}
};
EDIT
The goal is every single click of remove button removes a child
element.
remove.onclick = function() {
if(section.children length ) {
section.removeChild(section.children[0]);
}
};
changed for with if
The code
JavaScript:
var recurringF = (function(){
this.$el = $("#target");
this.arg = arguments[0];
this.spl = (!_.isEmpty(this.arg)) ? this.arg.split(" ") : false;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
if(i===0){
this.$el.append(document.createElement(this.spl[i]));
}else{
this.$el.children().last().append(document.createElement(this.spl[i]));
}
}
}
return {
"$":this.$el
}
});
var t = new recurringF("div h1 span");
HTML-Body:
<body>
<div id="target"></div>
</body>
The Goal
I'd like to append elements sequentially to an parent element $("#target") so that the end result in the HTML is the following:
<body>
<div id="target">
<div>
<h1>
<span></span>
</h1>
</div>
</div>
</body>
The loop does not append the created elements to the the last appended element, but to the in loop cycle 1 created element 'div' like the following:
<div id="target">
<div>
<h1></h1>
<span></span>
</div>
</div>
What am I missing?
By using .children(), you'll only get the immediate div on every iteration after the first, thus resulting in
<div id="target">
<div>
<h1></h1>
<span></span>
<alltherest></alltherest>
</div>
</div>
because .children only looks at children, not all descendants. What you want is .find(*) so that it will get the deepest nested descendant on each iteration.
this.$el.find('*').last().append(document.createElement(this.spl[i]));
https://jsfiddle.net/f3fb997h/
That said, it would be better if you just stored a reference to the last created element and append to it, rather than having to reselect it every iteration.
var $tempEl = this.$el, newEl;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
newEl = document.createElement(this.spl[i]);
$tempEl.append(newEl);
$tempEl = $(newEl);
}
}
https://jsfiddle.net/f3fb997h/1/
Note that at this point you're not really benefiting from jQuery at all, so a small tweak and you're not depending on it.
var recurringF = (function(){
this.el = document.getElementById('target');
this.arg = arguments[0];
this.spl = (!_.isEmpty(this.arg)) ? this.arg.split(" ") : false;
console.log(this.spl);
var tempEl = this.el, newEl;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
newEl = document.createElement(this.spl[i]);
tempEl.appendChild(newEl);
tempEl = newEl;
}
}
return {
"el":this.el
}
});
You can try using regular javascript functionality, as it has child appending built in:
const recurseElement = (elementString, target) => {
const elements = elementString.split(' ');
elements.forEach(function(ele) {
const domElement = document.createElement(ele); // create the element
target.appendChild(domElement); // append to the target
target = domElement; // this element is the new target
});
}
So now you can use it like so:
recurseElement('div h1 span', document.getElementById('target'));
const recurseElement = (elementString, target) => {
const elements = elementString.split(' ');
elements.forEach(function(ele) {
const domElement = document.createElement(ele); // create the element
target.appendChild(domElement); // append to the target
target = domElement; // this element is the new target
});
};
recurseElement('div h1 span', document.getElementById('target'));
#target div {
background: green;
height: 16px; width: 128px; padding: 10px;
}
#target div h1 {
background: red;
height: 16px; width: 64px; padding: 10px;
}
#target div h1 span {
background: purple; display: block;
height: 16px; width: 32px; padding: 10px;
}
<div id="target"></div>
It should be noted that arrow functions are available for Chrome 45+, Firefox 22.0+, Edge, and Opera. They do not work in IE or Safari. Or they will work if you have a transpiler (like babel)