I want to repeat 'post' div and all of its contents eg 50times in left-col div using jquery and call it inside html?
HTML:
<div class="post"> Content </div>
JS:
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);
$(document).ready(function(i) {
for (let i = 2; i < 100; i++) {
$(".post:eq(0)").clone().appendTo(".left-col");
}
});
You can do it like this:
$(document).ready(function(i) {
for (let i = 0; i < 50; i++) {
$(".post:eq(0)").clone().appendTo("#left-col");
}
});
There was a few problems with your code. First $("#post") should be $(".post"), since it's a class not an id.
Second your for loop was not correct. You were missing the {} and also it should be i < 50 not i < i.length(50)
Also important to note that I've added :eq(0) to $(".post"), since it would cause a big problem without.
Because first time the loop would run, you would have 1 element with the class post, second time you would have 3 elements, third time = 6 elements and so far.
$(document).ready(function(i) {
for (let i = 0; i < 50; i++) {
$(".post:eq(0)").clone().appendTo("#left-col");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post"> Content </div>
<div id="left-col"></div>
Related
I am trying to remove the following div from a page with my chrome extension
HTML (TO REMOVE)
<div class="base-popup js-base-popup"><div class="js-obscurity base-popup__obscurity"></div>
<div class="base-popup__indent"></div>
<div class="base-popup__wrap">
<div class="base-popup__container clearfix base-popup__container -decor" style="width:500px;">
<i class="s-icon -m -close base-popup__close js-close"></i>
<div class="base-popup__content js-content"><div><div class="s-text">Sample Text.
<!-- close tag -->
</p>
<!-- close tag in translate -->
</div></div></div>
</div>
Here is the JS in my content script
function removeElementsByClassName(names) {
var els = document.getElementsByClassName(names),
i, element;
for (i = els.count - 1; i > 0; i -= 1) {
element = els[i];
element.parentElement.removeChild(element);
}
}
removeElementsByClassName('base-popup js-base-popup');
getElementsByClassName only accepts a single class name, but you're giving it two. Since the HTML you've shown only has a single element that has either of the two classes you're using, if that's the only element you want to remove, just pick one:
removeElementsByClassName("base-popup");
// or
removeElementsByClassName("js-base-popup");
Alternately, you could use querySelectorAll with a CSS selector:
function removeElementsBySelector(selector) {
var els = document.querySelectorAll(selector),
i, element;
for (i = els.count - 1; i > 0; i -= 1) {
element = els[i];
element.parentElement.removeChild(element);
}
}
Then if you want to remove elements that have either class:
removeElementsBySelector('.base-popup, .js-base-popup');
Or if you only want to remove a single element that has both classes:
removeElementsBySelector('.base-popup.js-base-popup');
And as this is a Chrome extension, you can do that rather more simply with Array.from, forEach, and Element#remove:
function removeElementsBySelector(selector) {
Array.from(document.querySelectorAll(selector)).forEach(element => {
element.remove();
});
}
your javascript is completely wrong. the right way:
function removeElementsByClassName(names){
names=names.split(" ");//you just get elems by one class so you need to split it into multiple operations
for(var a=1;a<names.length;a++){//ability to remove multiple classes
removeElementsByClassName(names[a]);
}
var els = document.getElementsByClassName(names[0]);
for (var i =0; i<els.length ; i++) { // its length not count
var element = els[i];
element.parentElement.removeChild(element);
}
}
removeElementsByClassName('base-popup js-base-popup');
this removes all elements that contain one of these classes, if you wanted sth else see the other solution.
I am trying to randomize the hero content of a home page. I have this simple code, but it affects all the divs on the page, and I only want it to affect a few.
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
Here is my html:
<div id="hero1">One</div>
<div id="hero2">Two</div>
<div id="hero3">Three</div>
<div id="constant">This content does not rotate.</div>
There is another caveat to this, I need it to work within a crappy CMS that strips out my class tags. So it has to be a solution that identifies the divs based on id.
How about
var elems = $('div').not('#constant')
?
The not function removes matching elements from the set it's called on.
I tried this code to remove every other element in the body, but it didn't work.
s = document.body.childNodes;
for (var i = 1; i < (s.length / 2); i++) {
if ((i % 2) == 0) {
document.body.removeChild(s[1]);
} else {
document.body.removeChild(s[0]);
}
}
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</body>
There are a number of problems with your code. For one thing the logic is off, but there are some major problems with how the code deals with the DOM manipulations:
Your HTML causes text nodes to be created between your elements. And your code does not handle this.
The childNodes list changes as you remove nodes from the parent element.
With this HTML:
<div id="test-container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
</div>
And this JavaScript:
var container = document.getElementById("test-container");
var child = container.firstElementChild;
var remove = true;
while (child) {
var next = child.nextElementSibling;
if (remove)
container.removeChild(child);
remove = !remove;
child = next;
}
I can remove every other child. I avoid both problems I pointed out earlier by using firstElementChild and nextElementSibling.
First, you need to get the elements using children or querySelectorAll() not childNodes, childNodes will get all nodes including the text. Try the following code:
var s = document.body.children;
var itemCount = s.length;
for (var i = 0; i < itemCount; i++)
{
if (i % 2 !== 0)
{
document.body.removeChild(s[i]);
}
}
Here is a JSBin example.
Note that in JSBin we get the elements using querySelectorAll(), beacuse it also adds script elemets inside the body, for example:
var s = document.querySelectorAll('div');
Also, note that IE8 and below includes comment nodes when using children.
You need to know that a nodeList will update when the dom is updated, that means that if you are removing the first child node, the element 0 in the list will not refer to null but the node that was initial child 1.
This means that if you want to remove node 0, 2, 4, 6, ... you will actually have to remove 0,1,2,3,4... (because the nodeList always will update):
var body = document.body;
// Consider that you might want to use `body.children` instead of
// `body.childNodes` because it excludes all text nodes
var nodes = body.childNodes;
var len = nodes.length / 2;
for ( var i = 0; i < len; i++ ) {
body.removeChild(nodes[i]);
}
I know it can seams kind of odd, but this will actually remove all the nodes: 0, 2, 4, 6, ...
See more at MDN
I'd just use querySelectorAll with a :nth-child(odd) selector:
var divs = document.querySelectorAll('body > div:nth-child(odd)');
divs = [].slice.call(divs); // convert from NodeList to real array
divs.forEach(function(elem) {
document.body.removeChild(elem);
});
jsFiddle
Why not use jQuery and simply do:
$('.remOdd').on('click', function(){
$('div').filter(':odd').remove();
})
http://jsfiddle.net/dh5uymzL/
Or of course use ":even" if you like
http://api.jquery.com/filter/
I want to show my overlays when hovering over items.
This the code:
<div class="item" id="item-1">
<div class="overlay" id="overlay-1"></div>
</div>
<div class="item" id="item-2">
<div class="overlay" id="overlay-2"></div>
</div>
var items=["#item-1","#item-2"];
var overlays=["#overlay-1","#overlay-2"];
for (var i = 0; i < products.length; i++) {
$(items[i]).hover(
function(){$(overlays[i]).css("visibility", "visible");},
function(){$(overlays[i]).css("visibility", "hidden");});
}
however, it doesn't work...
it seams that overlays[i] can't be recognized...
why?
I would do something like this
$(".item").hover(function(){
$(this).find(".overlay").show();
});
This seems like it is a scoping issue where the overlays you are trying to select are out of scope.
You could eliminate the need to explicitly loop over the items altogether by just apply the hover to the "item" class and the hide/show logic to the "overlay" class. Additionally, to hide and show items, the jQuery friendly pattern is to use the hide and show methods.
$('div.item').hover(function(){
var overlay = $(this).children('div.overlay');
overlay.hide();
});
overlay.hide();
},
function(){
var overlay = $(this).children('div.overlay');
overlay.show();
});
With out knowing all of the details, you should know that this approach could produce some unwanted flickering.
It's a closure issue. By the time the hover in/out functions actually run, the loop has long since exited, and i > 2.
Add a separate handler function:
var items=["#item-1","#item-2"];
var overlays=["#overlay-1","#overlay-2"];
function sethover(n) {
$(items[n]).hover(
function(){$(overlays[n]).css("visibility", "visible");},
function(){$(overlays[n]).css("visibility", "hidden");});
}
for (var i = 0; i < items.length; i++) {
sethover(i);
}
for (var i = 0; i < items.length; i++) {
$(items[i]).hover(function(){
$(this).find('.overlay').css("visibility", "visible");
}, function(){
$(this).find('.overlay').css("visibility", "hidden");
});
}
I am trying to create a text slider.
I am currently building a website and would like to add a section where I can display customer reviews and it changes from one review to another.
You cannot do that with just HTML and CSS.
You would need to use Javascript, which assuming that you have this HTML:
<div class="customer_review" id="review0">
Some contents
</div>
...
<div class="customer_review" id="review14" style="display:none;">
Some other contents
</div>
Your Javascript would look something like:
var current_id = 0;
function newCustomerReview() {
// get all review elements
var reviews = document.getElementsByClassName("customer_review");
current_id = (current_id < reviews.length) ? current_id++ : current_id = 0;
for(var i = 0; i < reviews.length; i++) {
// iterate through every review element
var myReview = reviews[i];
// check if it is the new one we want
if (i == current_id) {
myReview.setAttribute("style", "display: block;");
// or just remove style attribute
}
else {
myReview.setAttribute("style", "display: none;");
}
}
setTimeout("newCustomerReview();", 3000);
}
setTimeout("newCustomerReview();", 3000); // to start updating every 3 seconds