<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();
Related
My question is pretty simple. I have div1 that has a variable offset().top depending on other elements of the page. I want to insert an absolute div next to it (basically with the same absolute top) either with just css or with javascript too.
HTML looks something like
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
Since in the comments you say you want to place div2 after it has been inserted in the DOM, you can try the following:
$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)
#div1, #div2 { display:inline-block; }
and
<div id="div3">
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
</div>
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.
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.
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