Develop Reference

jquery selector finding div without id or class

<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();

Moving a div from inside one div to another div

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

jQuery select elements only if they aren't nested within like elements

Assuming the following:
<div class="a"> <!-- select -->
<div class="b">
<div class="a"> <!-- skip -->
</div>
</div>
</div>
<div class="b">
<div class="a"> <!-- select -->
<div class="b">
<div class="a"> <!-- skip -->
</div>
</div>
</div>
</div>
<div class="a"> <!-- select -->
</div>
How do I only select the outermost $('.a') elements?
Edit: A helpful JSFiddle, in this example, only 'a' should be selected, not 'a!'.

This is where filter methods come in handy:
$('.a').not('.a .a');
This excludes any .a that is nested within another .a so you only get the outermost ones, regardless of whether the outermost ones are themselves nested within other elements.

Try using the jQuery :not selector
$('.a:not(.a .a)')
http://jsfiddle.net/7E7Mk/1/

Try
var a = $('.a'), not = a.find('.a');
a.not(not);
selector profiling

Need explanation of jQuery code

Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>

The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?

Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.

Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());

how to remove matched tags but leave content with JQuery

I have HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to get rid of the div's of class="a" but leave their content. My initial attempt was:
$("div.a").replaceWith($(this).html());
However this is undefined. How would you do this?

try
$("div.a").each(function(){
$(this).replaceWith($(this).html());
});

Replacing elements with their stringified HTML content will nuke any event handlers that might be in place. This won't:
$("div.a").each(function () {
$(this).replaceWith($(this.childNodes));
});

In jQuery you could also use contents and unwrap.
$(".parent").find(".a").contents().unwrap();
<div class="parent">
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>