Develop Reference

Select first child elements of multiple parent elements and apply same class to all

I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?

You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});

you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');

Jquery select the element h3

How can I select element in this HTML using jquery selectors.
<div class = 'divOne">
</div>
<div class = 'divTwo">
<h3>Title</h3>
</div>

$('.divOne').siblings('.divTwo').children('h3')

$(".divOne") to perform jquery functions on first div
$(".divTwo") to perform jquery functions on second div
$("h3") to perform jquery functions on header element

It's pretty simple to select the h3 element.
But you have to fix your HTML first. While, when writing HTML5, in general it's possible to use single-quotes. But, you have to use them at the start and the end of the value like this: <div class='divOne' /> or <div class="divOne" />
$('.divTwo > h3').css('border', '1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
<h3>Title</h3>
</div>

You could use the jQuery selector and select h3 with $('h3'). But maybe you have more than one h3-tags in your code.
In that case you could give the h3 a class and select the class with the selector.
Example:
<div class = "divOne">
</div>
<div class = "divTwo">
<h3>Title</h3>
</div>
In this case use: $('h3');
OR
<div class = "divOne">
</div>
<div class = "divTwo">
<h3 class="myClass">Title</h3>
</div>
And in this case you use $('.myClass');
-----------
In the above I explained how you could select an h3-tag, but it does work with all elements ofcourse ;)
I also noticed that you use single quotes and double quotes in your HTML ('divOne")
Do not use both for a single attribute. Just "divOne" or 'divOne'.

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

Adding attributes to all html tags

I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?

Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");

ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements

Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!

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