We Keep Coding

Getting the selector, not the handler

HTML:
<div id="div1">
<div class="close">close</div>
</div>
<div id="div2">
<div class="close">close</div>
</div>
jQuery:
$('.close').on('click', '#div1, #div2', function(){
console.log ( $(this) ); // .close
});
If I have multiple elements with close buttons, how do I get the parent element as this and not the button?
So if I click the .close on #div1, I need #div1 as this to work with it.

By instinct, I would look to closest, which takes a selector as a param:
var selector = '#div1, #div2';
$('.close').on('click', selector, function(){
console.log ( $(this).closest(selector) ); // .close
});
.closest will return a jQuery object representing first node that matches the selector. It starts with the current object and continues to .parent() until it finds a match

since the element is a child of the element you want to reference, use a parent selector.
$(this).parent().hide()
Most of the time we would use a class on the element and use closest to select it.
$(this).closest('.msg').hide()
$('.close').on('click', function(){
$(this).closest(".msg").hide();
});
.msg{
.border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="msg">
<div class="close">close</div>
<p>test 1</p>
</div>
<div id="div2" class="msg">
<div class="close">close</div>
<p>test 2</p>
</div>

You actually don't need any selector, just a .closest("div").
If you want to be a bit more specific like "The closest ID starts with div" than you could do like:
$('.close').on('click', function(){
$(this).closest("[id^='div']").fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<div class="close">close1</div>
</div>
<div id="div2">
<div class="close">close2</div>
</div>
Or, by doing it the way you started you could use the event.delegateTarget -
which refers to the actual selector-delegators $('#div1, #div2')
$('#div1, #div2').on('click', '.close', function(event) {
$(event.delegateTarget).fadeOut();
});
// or use also for brevity:
// $("[id^='div']").on(...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<div class="close">close1</div>
</div>
<div id="div2">
<div class="close">close2</div>
</div>

clone a div and insertAfter last child of siblings within relative parents

My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .

You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>

If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>

if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>

jquery - Changing styling of a class containing a particular child class

I want the height of .pst to be increased if it contains a child class .pa , the code below doesn't work, and if i use '.pst' instead of this keyword all the div elements with .pst changes. Help!
window.onload = function() {
if($('.pst').contents().find('.pa').length !=0){
$(this).css('height','+=200px');
}
}
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>

You can simplify it with :has selector:
window.onload = function() {
$('.pst:has(.pa)').css('height', '+=200px');
}
Above will select and increase height of only those .pst which have .pa descendants.

No need to check contents, just target the class combination you want using $('.pst .pa'). Then you can loop the items using each().
Here's a runnable snippet:
$(function() {
$('.pst .pa').each(function() {
$(this).css('height','+=200px');
});
});
.pa {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
.pb {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>

I want the height of .pst to be increased if it contains a child class .pa
You are using $(this) in if condition which refers to the global window object not to the current .pst element.
Consider using each:
$('.pst').each(function(){
if($(this).find('.pa').length){
$(this).css('height','+=200px');
}
});

How to skip some divs to search in context?

For example I have the following HTML structure :
<div class="container">
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container-with-details">
<div class="details">...</div>
<div class="details">...</div>
<div class="details">...</div>
<div class="details-to-skip">...</div>
<div class="details-to-skip">...</div>
</div>
</div>
I need to find all inputs in class .container except inputs that are in classes .details-to-skip.
How to do this?

So you can not-selector
$('.container input:not(.details-to-skip input)')
or .not()
$('.container input').not('.details-to-skip input')
$('.container input:not(.details-to-skip input)').after('<span>before</span>');
$('.container input:not(.details-to-skip input)').val('selected')
.field-container-with-details > div {
padding: 5px;
}
.field-container-with-details > .details {
border: 1px solid green;
margin-bottom: 3px;
}
.field-container-with-details > .details-to-skip {
border: 1px solid red;
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="field-container"></div>
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container-with-details">
<div class="details">
<input />
</div>
<div class="details">
<input />
</div>
<div class="details">
<input />
</div>
<div class="details-to-skip">
<input />
</div>
<div class="details-to-skip">
<div>
<input />
</div>
</div>
</div>
</div>

You can use filter(). Try this:
var $inputs = $('.container input').filter(function() {
return $(this).closest('.details-to-skip').length == 0;
});
The $inputs variable will now contain a collection of all the inputs that are not contained within those divs.

try this :
$('.container div:not(.details-to-skip) > input')

Unfortunately some answers are incorrectly selecting the inputs where any parent has .details-to-skip.
They tend to re-include the inputs as they are also descendants of the div with class="field-container-with-details"
The filter needs to be more specific:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/z8cqx8kq/1/
e.g.
$('.container div:not(.details-to-skip) > input');
Note: this will ony work if the inputs are direct children of the div.
Rory's answer is actually the most robust as it looks for an ancestor of each input with that class.
Arun P Johny's answer works as if by magic! It applies an ancestor-descendant relationship selector to a descendant (which I did not know would work - until today). Well done Arun :)

How can I find IDs of DIVS, and assign those names as classes to other DIVS?

I'm fairly new to jquery and cannot figure this out. I have 3 divs with different id's but all start with "sharedform". I want to loop through those divs, grab each id and assign it as an identifying class to the 'slideHead' div preceding each. Any help would be greatly appreciated!
HMTL:
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>
jquery:
var $getclass = $(".drawer");
addclass = $getclass.find('[id^="sharedform"]').attr('id');
$(".slideHead").addClass(addclass);

I'd suggest:
// get all elements whose id starts with 'sharedform', iterate over that collection:
$('div[id^=sharedform]').each(function (){
// find the parent of the 'this' element:
$(this).parent()
// find the previous element, if it matches the passed-in selector:
.prev('.slideHead')
// add the id of the element we initially selected as a class:
.addClass(this.id);
});
$('div[id^=sharedform]').each(function() {
$(this).parent().prev('.slideHead').addClass(this.id);
});
div {
width: 80%;
margin: 0 auto;
min-height: 2em;
padding: 0.5em;
border: 1px solid #000;
}
.slideHead {
background-color: #f00;
}
.slideHead.sharedform\.something {
background-color: #0f0;
}
<div class="slideHead"></div>
<div>
<div id="sharedform.something">some text in the div</div>
</div>
But note that those class-names are problematic, given the inclusion of a period (.) in the id.

This should do it:
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
var newHTML = $('body').html(),
out = $('<pre/>', {class:'out'}).appendTo( 'body' );
out.text( 'NEW HTML\n' + newHTML );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>