Develop Reference

jQuery: move the complete element into another one, but not its content only

There is the source DIV element that must appear within the target DIV.
And there is jQuery appendTo method that seems to do that for me.
For example:
<div class="source">Move Me</div>
<div class="destination"></div>
jQuery(document).ready(function(){
jQuery('.source').contents().appendTo('.destination')
});
But actually it only moves source's content into the target DIV, keeping the empty source DIV where it originally was: here is the JSFiddle that demonstrates this.
So, instead of
<div class="destination">
<div class="source">Move Me</div>
</div>
the appendTo result is just
<div class="source"></div>
<div class="destination">Move Me</div>
Is there a way to achieve
<div class="destination">
<div class="source">Move Me</div>
</div>
without extra wrapping elements?

$.contents() will grab the content of the element, but leave the element itself alone. The default behavior of $.append() and $.appendTo() is to move the entire element. So in your example, you simply need to use jQuery('.source').appendTo('.destination') and that will move .source in to .destination
jQuery('.source').appendTo('.destination')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">Move Me</div>
<div class="destination"></div>

Just get rid of that .contents() method to move the whole element.
$('.destination').append($('.source'))
will turn
<div class="destination"></div>
<div class="source">Move Me</div>
into
<div class="destination">
<div class="source">Move Me</div>
</div>

Simply exclude .contents() in your own solution, this way:
jQuery(document).ready(function(){
jQuery('.source').appendTo('.destination')
});
Then it will move Div.source completely into Div.destination. Here is the fiddle: https://jsfiddle.net/NDFA/cur9qg2w/

First all.The Jquery's appendTo behavior is append after an element to another element. So that behavior is correct. Also append method may be you need.

click opens all divs instead of one

I'm really new to jQuery, i'm in the middle of a small crisis.
$(document).ready(function(){
$(".help_box").click(function(){
$(".help_box_answer").toggle(400);
});
});
Here's the HTML itself
<div class="help_box">
<div class="help_box_title">title box</div>
<div class="help_box_answer">
<p>Hidden message</p>
</div>
</div>
the class="help_box_answer" is set to display:none
When I click on the div, this happens

Use this to refer to only the element you're clicking on instead of all the divs with the same class:
$(document).ready(function(){
$(".help_box").click(function(){
$(this).find(".help_box_answer").toggle(400);
});
});
jsFiddle example

How to select all following elements with class in jquery

How can I select all following elements from my selector, stopping when the next element is not part of it and ignoring the further elements?
example:
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
now in js / jquery:
$('.primary').click(function()
{
$(this).... //acces to all following elements with class "sub"
});
so when clicking on the first primary div, I can affect the 3 following "sub" divs
I know I could do some kind of .next() in a while, but this seams inefficient.

Use .nextUntil()
$('.primary').click(function(){
$(this).nextUntil('.primary').text($(this).text())
});
Demo: Fiddle

This will Helpful to you
**SEE DEMO http://jsfiddle.net/dhaval17/W3Jsy/**

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});​
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});

How do I select these children divs

I'm trying to alert the ids of each of these divs so it output 11 25 78.
<div id="main">
<div id="section-11">Some content</div>
<div id="section-25">Some content</div>
<div id="section-78">Some content</div>
</div>
I've already selected main and I'm trying to use children but it's not working. Not sure why.
$('#main').children().each(function(){
alert($(this).attr('id'));
});

$('#main div').each(function() {
alert($(this).attr('id').replace(/section-/, ''));
});

This works fine for me:
http://jsfiddle.net/mfgXG/
Are you forgetting to run after on ready?

It does work at least in FF. Have a look there at this JSFiddle

I guess there are more nested div elements there, i.e. those "section" elements are not direct children of the main panel?
In such case, have such selector:
$('#main div[id^="section-"]').each(function(){
To find all matching elements.