We Keep Coding

JQuery: Append before an element

Using JQuery I have appended a div into a container called .mobile-sub. I call the append by doing:
$('.s2_error').addClass("revive");
$('.revive').parent(".mobile-sub").append('<div>mydiv</div>');
It works fine but the problem is that it is placing the div after the .s2_error tag whereas I need it to be placed before so the end result HTML will look like this:
<div>mydiv</div>
<p class="s2_error">Error</p>
Any ideas?

Using various options like below
insertBefore
$("<div>mydiv</div>").insertBefore('.mobile-sub .s2_error');
OR by writing another selector inside your insertBefore
$("<div>mydiv</div>").insertBefore($('.revive').parent(".mobile-sub").find('.s2_error'));
Meaning
$('thisElementShouldBe').insertBefore('thisElement');
prepend
$('.revive').parent(".mobile-sub").prepend('<div>mydiv</div>');
So <div>mydiv</div> will always be added as the first child of mobile-sub
before
$('.revive').parent(".mobile-sub").find('.s2_error').before("<div>mydiv</div>");

You can do it two ways:
Before
$(".s2_error").before("<div>mydiv</div>");
InsertBefore
$("<div>mydiv</div>").insertBefore(".s2_error");
Both do the same but they are syntactically different.

You can use .insertBefore()
Insert every element in the set of matched elements before the target.
$("<div>mydiv</div>").insertBefore('.s2_error');
OR, .before()
Insert content, specified by the parameter, before each element in the set of matched elements.
$('.s2_error').before("<div>mydiv</div>");
Note: The .before() and .insertBefore() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target.

You want to add element as first child. You need to use .prepend() instead of .append():
$('.revive').parent(".mobile-sub").prepend('<div>mydiv</div>');
You can also use .insertBefore ():
$("<div>mydiv</div>").insertBefore('.s2_error');
or .before():
$( ".s2_error" ).before( "<div>mydiv</div>" );

.insertBefore( target )
Description: Insert every element in the set of matched elements
before the target.
or
.before( content [, content ] )
Description: Insert content, specified by the parameter, before each
element in the set of matched elements.

Find first ancestor to be a child of an object with specific class using jQuery

I am looking for a correct way to find elements first ancestor to be a child of an element with a specific class.
Using XPath notation I'm looking for (if I didn't botch it):
./ancestor::*[../#class='my_class']
I guess I can run a while(...) loop calling parent() until current elements parent has specified class and go from there, but maybe there is some selector/filter/whatever in jQuery that can be used instead?

If I understood it correctly, you're trying to get the last ancestor when going up, before hitting the ancestor with '.my_class':
$(element).parentsUntil('.my_class').last()
See documentation.

In jquery find a child with specific class :
$("mycontrol").find(".myclass");
find parent with specific class :
$("mycontrol").closest(".myclass"); //return the first parent

Perhaps
jQuery(".my_class").parent().eq(0)
If I have this right.. First parent that is a child of an element with class "my_class":

Find all the elements with class .my-class and get the set of their children, then use .closest()
on your jQuery object, with that set as an argument.
$('myElementSelector').closest($('.my-class').children())
I think that should do it...

Hiding the <p> and showing the <textarea> on a <a> click

I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});

You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.

I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/

You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();

jQuery selecting all divs of a kind and attaching event

$('#tags').each(function(i,element){
$(this).on('click',function(){
$('.otherdiv').toggle();
});
How can i attach the click handler to ALL divs with the id of tags? for some reason this is only targetting the first one

There is no need for the each, just do:
$('.tags').on('click',function(){
$('.otherdiv').toggle();
});
and apply a class of tags to each of the divs, you should not have multiple divs with the same id.
This will then apply the on click bindings to all divs with a tags class.

You should not have more than one ID.
use classes instead.
$(".tags").click(function() {
$('.otherdiv').toggle();
});
attribute the css class to every element you want

IDs are unique. You shouldn't have more than 1 element with any given id.
As noted in other answer, use class instead to select multiple elements.

How can I select an element by id and class in javascript?

I want to know if we can select an element by using its id and class at the same time. I know in css we can do that with #x.y, but but how can it be accomplished in javascript? I tried the following code and it worked fine but then all the controls with ui-slider-handle class got affected(which is obvious). I think I need a combination of id and class both so that only that particular element will be affected.
Javascript:
$(".ui-slider-handle").text(ui.value);

A combination of ID and class for selecting elements is useless as IDs are meant to be unique.
never have multiple identifiers with the same value in one page!
If you want multiple elements with the same attributes, use a class. If not, consider an ID or a class.
If you want to have a lot of elements with the same attributes, but one with extra attributes, you can give that one an ID and assign extra attributes to the ID

You will never need to do this since the ID is unique; if you know it, you can already identify the element.
Your problem is actually that your selector matches too many elements. There are other ways to limit the "range" of a selector:
Add a parent element with a certain ID/class: .parent .ui-slider-handle matches only elements with the class ui-slider-handle that are children of all elements with the class parent
You can also limit by parent type: div .ui-slider-handle
Or only direct children: div > .ui-slider-handle
See jQuery selectors for all the goodies.

Since ids should be unique, you should be able to do your selector by only id. If are wanting to apply the same attribute to multiple elements, then you should use a class. In your scenario it seems you should be fine with just using id like this:
$("#id").text(ui.value);

What you can write is:
$("#ID.ui-slider-handle").text(ui.value);
The string inside the quotes is a normal CSS selector, which supports both classes and ids. However, the above code is redundant and slow, and unless you want to select that particular id only if it has a certain class, it would be preferable to write:
$("#ID").text(ui.value);