I am trying to move a div with class="SomeDiv" into/inside a div with ID="ParentDiv"
If I edit the javascript to move div with ID into another div with a diff ID that works. But moving a div with Class into div with ID is not working. Am I missing something?
HTML
<div id="ParentDiv">
<div id="ChildDiv">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<!-- move SomeDiv here -->
</div>
<div class="SomeDiv">some content</div>
JS:
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv'));
http://jsfiddle.net/9gvsa/1/
.getElementsByClassName returns array so you need an index at the end like this:
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);
using jquery makes it easier, look at the updated version of your jsfiddle and you can see the item has been moved, by inspecting the dom tree
$(document).ready(function(){
$("#ParentDiv").append($(".SomeDiv"));
});
example
Use document.getElementsByClassName('SomeDiv')[0] instead,
getElementsByClassName returns a array of elements while getElementsById returns a single element
Source: document.getElementsByClassName
getElementsByClassName returns a HTMLCollection of found elements.
If you know that your div has a unique class you can do
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[0]);
You cannot get an element of a class like that. document.getElementsByClassName returns an array. You would have to do something like...
document.getElementsByClassName('SomeDiv')[0]
Moreover, if you want to put all divs of that className in the div, do some iteration.
for (i=0;i<=document.getElementsByClassName('SomeDiv').length;i++) {
document.getElementById('ParentDiv').appendChild(document.getElementsByClassName('SomeDiv')[i]);
}
Related
$('#mainlist').last().hide().fadeIn(200);
Why is this hiding, and then fading in all the items in the list instead of just the last one?
Edit: The section of HTML:
<div id="mainbox">
<ul id = "mainlist">
</ul>
</div>
My js appends to the ul with a li, and then it runs the first code shown above.
It's because there's only one element in the list returned by $("#mainlist"). You're selecting the last #mainlist which is your ul.
The .last() method selects the last element in a list of DOM elements, not the last child of the elements selected.
From the jQuery docs:
Given a jQuery object that represents a set of DOM elements, the
.last() method constructs a new jQuery object from the last element in
that set.
You want something like $('#mainlist li').last().hide().fadeIn(200); instead.
It's because your #mainlist element has another child/wrapping <ul> before the list items (so it's hiding the wrapping <ul>, thus all the elements). Maybe try be more specific with your selector
$("#mainlist li").last().hide().fadeIn(200);
EDIT By the way, this assumes your <ul> is filled with <li> tags.
I'm trying to get the next div after an image:
<a rel="nofollow" href="http://localhost:8046/file.htm" class="imgbox">
<img src="http://www.domain.tld/fm/912/image.png" class="" id="img-1303122" style="max-width:560px;" width="700" border="0" alt="title="/>
</a>
<div id="lic-img-1303122" class="licence-wrapper" style="display:none;">
<div class="licence-spacer"></div>
<div class="licence">© copyright<br /></div>
</div>
My jQuery code is the following:
console.log($("#img-1303122").nextAll(".licence-wrapper"));
Object { length: 0, prevObject: Object, context: HTMLDocument → JSUmstellung, selector: "#img-1303122.nextAll(.licence-wrapper)" }
So, why do I get no result? I already tried .next(), .closest() and .siblings() and none of them worked.
try :-
console.log($("#img-1303122").parent().nextAll(".licence-wrapper"));
Demo
Try this : you are trying to find next element directly to image, but actually div is present next to anchor tag. So get parent anchor tag with class="imgbox" and then .nextAll
console.log($("#img-1303122").closest('.imgbox').nextAll(".licence-wrapper").length);
#img-1303122 doesn't have other divs close by, probably you meant lic-img-1303122, next looks only for siblings, from the docs:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
.nextAll() Gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.
So you need to try this:
$("#img-1303122").parent().nextAll(".licence-wrapper")
Hey you can also get all div by this
alert($("#img-1303122").parent().parent().find(".licence-wrapper").length);
Demo
I am adding & removing div inside the main div using javascript dynamically. I am using appendChild and removeChild method for this purpose.
Example,
<div>
<div></div>
<div></div>
<div></div>
</div>
If I remove the first div then the space of first div is still there. I would like to remove the space used by first div and need to bring the second div to first position. Please suggest me good way to do this. Any jquery library also I would like to try.
thanks
You can use remove(). Please see an example below
Try the following code in you $(document).ready(function(){ function
$('.add').click(function (){
$('#main').append('<div style="height:30px;border:1px solid #CCC;margin:10px;width:30px;">hey</div>');
});
/** remove a child from a container **/
$('.remove').click(function (){
$('#main div').first().remove();
});
And your Html body will be something like this
<div id="main"></div>
Add
Remove
I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.
$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).
$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')
.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');
you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/
I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.
Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div
Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");
I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not
Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');