just a quick one. I want to change the order of two specific divs in the markup. Both divs have childs.
<div class="first">
<elem>
<elem> </elem>
</elem>
</div>
<div class="second">
<elem>
<elem> </elem>
<elem>
</div>
and want it to change to .second then .first.
I tried:
$('.first').insertAfter('.second');
which works, but without the childs. Is there any way to achieve what I want with .insertAfter() or is there anything else I need to do?
Thanks
Insert after doesn't remove children elements,
check this fiddle
<div class="first">
<div>child of first</div>
<div>another of first</div>
</div>
<div class="second">
<div>child of second</div>
</div>
The documentation says "If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned"
In the simplest case (select by id - insert after div with a given id), my tests show that all the children come along with it.
Related
<div id="target">
<div>here</div>
<div>select this<div>it has more div within</div></div>
<div></div>
How to get the last child of target? I tried
$('#target').find('div:nth-child(2)')
Is this even correct? It seems like it will also select div within my target, which is what I don't want, hmm.
$('#target').children().last();
Use :last-child pseudo-class selector with direct child selector(>).
$('#target > div:last-child')
console.log($('#target>div:last-child').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
To select the second child use :nth-child(2) along with direct child selector(>) to avoid nested element.
$('#target > div:nth-child(2)')
console.log($('#target > div:nth-child(2)').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
Let me fix your markup first:
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
As far as I understood, you only want to select the text "select this". I am not sure what you are trying to do, but if you only want to get the text. You can just manipulate the string getting it using text() and then remove the <div>...</div> part. But, if you are trying to put some css attribute like color onto this node. You need to fix your div because of the cascading feature.
So instead, you might want to do this:
<div id="target">
<div>here</div>
<div>
<div>select this</div>
<div>it has more div within</div>
</div>
</div>
and then
$("#target").children().last().children().first();
I have:
<div class="stuff">
<div class="removeme">
<div class="iamfree">
iamfree
<div class="removeme">
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
</div>
</div>
I want:
<div class="stuff">
<div class="iamfree">
iamfree
<div class="ishouldbefreetoo">
ishouldbefreetoo
</div>
</div>
</div>
Tried the unwrap() function from jQuery here: http://jsfiddle.net/adyz/7d947wja/
Also, cloned elements act strange with unwrap.
You need to call the unwrap() on the contents of the elements to be removed.
$('.removeme').contents().unwrap()
Demo: Fiddle
Remove the parents of the set of matched elements from the DOM,
leaving the matched elements in their place.
I have a php loop that print a lot of html in this form:
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
That piece of code is repeated many times. Usig jQuery I manage to get the description content using the parent selector just by:
$('.activator').click(function() {
alert($(this).parents('.buttons').data('description'));
})
Since $(this) have a parent with the field I need, that js code is working great, I wonder now, how can I retrieve the src content of the class prod-img? since is outside the parent div...
If they are grouped like this
<div class="container">
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
</div>
<div class="container">
.....etc....
You can get prod-img by using .closest() and .find()
var src = $(this).closest('.container').find('.prod-img').attr('src');
Otherwise you need to use .parent() .prev() and .find() which is very static making it harder to change the HTML markup without changing the code.
var src = $(this).parent().prev().find('.prod-img').attr('src');
How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI
I am trying to figure out how to select a particular element with a certain class name within it's parent div, after a click event.
<div id="news">
<div class="one">
<p>news</p>
</div>
<div class="two">
</div>
</div>
<div id="users">
<div class="one">
<p>users</p>
</div>
<div class="two">
</div>
</div>
my simple jquery is as follows:
$(".clickme").on("click", function () {
//how to select only the element with the class "one" within the parent and show it
});
My failed attempts have been trying to use the parents and closest methods and code like $(this).parents().find(".one").show();
Any help would be great!!
Working Demo
try this
$(this).parent() refers to parent div
.prev('one') to previous sibling with class .one
$(this).parent().prev(".one").show();
Try with .prev()
$(this).parent().prev(".one").show();
See the DEMO
I would traverse it like this.
$('.clickme').click(function(){
$(this).parent().siblings().eq(0).show();
});
fiddle