Develop Reference

jQuery - How to hide an element and its children?

I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?

You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();

What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".

$('.row').hide();
please remove second class

From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle

jquery- keep an image at the top of div

I have a root div element and inside that div i have an image.
<div id="root">
<img id="msg"/>
</div>
Now using jquery i used to prepend n number of div elements inside that root div. The issue is that the new div elements come before the img tag. . like
<div id="root">
<div id="b"></div>
<div id="a"></div>
<img id="msg"/>
</div>
But I need it to prepended div elements to appear after the img tag like
<div id="root">
<img id="msg"/>
<div id="b"></div>
<div id="a"></div>
</div>
Any suggestions as to how I can achieve this using jQuery?

Try:
$("your html").insertAfter($("#msg"));

Like this maybe:
$("#msg").after();

Simply use the append method instead of prepend like this:
$('#root').append('<div>Div N</div>')
Here is the working example in JSFiddle.
And here is the documentation on jQuery's append method.

Use append() instead of prepend():
append() method add div after first div
prepend() method add div before first div.

Try
var newDiv = $("<div>test</div>");
$('img').after(newDiv);

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/**

Display multiple hidden divs using jquery?

I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.

You can use a multiple selector:
$("#div1, #div2").show();

$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.

If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.

Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.

Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();

How to insert opening div in jQuery?

I want to insert an opening div but it closes itself automatically. How do I get this to work.
I want to wrap thses two divs in one div called controls...
<div class="carousel-prev prev-next"></div>
<div class="carousel-next prev-next"></div>
So I get...
<div id="controls">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
</div>
I did try:
$(".jcarousel-prev").before("<div id='controls'>");
But as I mentioned above, it closes automatically.

$(".prev-next").wrapAll("<div id='controls'>");
in your particular case you're removing class too i.e.
$(".prev-next").removeClass('prev-next').wrapAll("<div id='controls'>");

You can use .wrapAll():
$(".prev-next).wrapAll('<div />');

You should use wrap function to achieve that:
http://api.jquery.com/wrap/

try this...
$(".prev-next").appendTo("<div id='controls'>");