I am creating two divs:
var div_day=document.createElement("div");
var div_dateValue=document.createElement("div");
I then want to add div_day to an existing calendar div and div_dateValue to div_day:
$('#calendar').append(div_day)
$(div_day).append(div_dateValue);
div_day gets added to calendar, but div_dateValue does not get added to div_day, and the script stops there. No errors in the console but it is in a loop and should have more div_days (each with a unique id). I am new to jquery so any help is appreciated.
In my search I have found how to add divs, but not to add a dynamically created div to another dynamically created div.
Thanks for your help!
Kevin
div_day.appendChild(div_dateValue)
$('#calendar').append(div_day)
Something else must be going on (even with your missing semi-colon). Your example works fine here:
http://jsfiddle.net/P4rh5/
But, instead of creating divs with straight javascript, you can do it with jQuery:
var div_day = $("<div>");
var div_dateValue = $("<div>");
$('#calendar').append(div_day);
$(div_day).append(div_dateValue);
Of course, you could do this in a single step:
$('#calendar').append("<div><div></div></div>");
$('<div><div></div></div>').appendTo("#calendar");
Try this and mark it as answer if it helps
Related
So here's my problem: I'm using a function and I need the function to be specific to each tr with the class "middleone". It's supposed to change the insides of a div inside of the the tr with the class "middleone". But it's not working!
I know the recursive portion of it is working, and the "navigation" should be spot on, because even when i'm using just $(this) it doesn't do anything. When using document.getElementById it works fine but of course that only targets the first div and the full version of the code has to "Go here, pull from here, put it here, go to the next area, pull from here.. etc" Here's the testing code.
$('.middleone').each(function() {
var tripleeagain = $(this).find('div')
tripleeagain.innerHTML = "$";
});
Thanks for any help
tripleeagain is a jquery object collection upon which you should use html() instead of innerHTML
Basically you could just write:
$('.middleone').find('div').html("$");
If you are doing specific stuff inside the loop then:
$('.middleone').each(function() {
//Some specific logic
var tripleeagain = $(this).find('div').html("$");
});
The problem is you are trying to access native API from a jQuery object.
var tripleeagain = $(this).find('div');// this will return a jQuery object
So you should use the jQuery API for setting the html contents
tripleeagain.html("$");
jQuery html API documentaion
I have a page that can have one of three possible elements. I would like to assign whatever element exists to a var and then check if the var is clicked.
I tried using the add(), but it has confused me:
var testingVar = $('#element-one').find('.object').add('#element-two').find('.object').add('#element-three').find('.object');
$(testingVar ).click(function() {
alert('works');
});
It seems to me that the add() overwrites the previous add()? if I am on a page that has #element-three, it works, if on a page with element-one or element-two, it doesn't. If I change the var to
var testingVar = $('#element-one').find('.object');
Then a page with element-one works.
Can someone help me understand how to use the add() properly in this case?
Thanks
I think what you're looking for is this:
$('#element-one .object').add('#element-two .object').add('#element-three .object');
.find() returns a new jquery object.
However, I think this would be easier in this case:
$('#element-one .object, #element-two .object, #element-three .object');
Or even easier, if you can change markup, is to give each element you're currently selecting by id a common class, and do this:
$('.common-class .object')
I need your help at a problem of my Wordpress Webpage. My Wordpress-page is an Single-Page-App with 3 different boxes of content. The left and center boxes are static, the right one changes its content by clicking on links of the other boxes. I decided, to load all the content in the right box and show them with the CSS-command visibility. With a combination of pathJS and JS, i want the URL to change by clicking on the links. So far so good - all works fine, but i dont get managed via my JS-Function to remove the shown-class.
My script looks like this:
<script>
function showDetailContent(showid) {
//suche objekt right_id -> was du zeigen willst -> getelementbyid
alert("1");
var id = document.getElementsByClassName('shown');
alert("2");
id.classList.remove('shown');
alert("3");
document.getElementByID("right_" + showid).classList.add('shown');
alert("4");
}
//var c = document.getElementById('content'); -->do the function :)
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script>
The alerts are just my way of "debugging". I think its not the best way to debugg, but i am very new in the world of prorgamming and this is kind of easy.
However, the first two alerts are shown, if i activate a link. So the (first) mistake is on the line
id.classList.remove('shown');
Normally, the right-box is hidden, so that only one content is load.
Do you understand my problem till here?
I would appreciate fast help!
Greetings, Yannic! :)
Look at this : http://snipplr.com/view/3561/ to know remove class pure javascript
getElementsByClassName gets multiple elements, try:
var id = document.getElementsByClassName('shown')[0];
Or iterate through them if you want to remove class from all elements with class shown;
I've got the following JavaScript code, which works great for the divs "from" and "copy" (when the user clicks "copy" it copys from "from"). I'm using ZeroClipboard.
clip.addEventListener('mouseDown', function() {
var pre = document.getElementById('from');
clip.setText(pre.innerHTML);
});
clip.glue('copy');
However, I want this to work for multiple divs - now it only works for the first one. I'm no JS expert so I humbly ask of you to explain how to do this. I'll use PHP to name my divs from1, from2, from3 etc and copy1, copy2, copy3 respectively.
You want to use var divs = document.getElementsByTagName('div') and then iterate over the divs object.
Steve's answer will work for all divs on the page. Assuming you have some divs that you don't want copied, a better solution will be:
var pre = document.getElementsByClassName('copy');
Amd then using a for to itterate the resulting array.
for(i=0; i<pre.length; i++){
clip.setText(pre[i].innerHTML);
}
Im new to js kindly help me! im using functionality to add text boxes dynamically im done with that part now i want make a js function that removes text boxes on a click on remove button. any help ?
You can use bellow JavaScript function to Remove elements.
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
If you have more information you can visit here.
You can either remove a child with
document.getElementById(n).removeChild(thebox);
or you can do as on this thread Remove <p class="classname"> in Javascript? (not recommanded for your case)
Finally, you can use jquery (famous library) with the function $("#id_of_element").remove(); (best and easiest solution)