Develop Reference

How to check if element exists after the current element with jQuery?

I need to check the following
if after $('.brandModelLineWrapper') there isn't a clearfix div, add it:
$('.brandModelLineWrapper').after("<div class='clear'></div>")
How could I do that?

You can use .next() with :is selector to check if it is div with class clear. and you can use .after() or insertAfter() to append the clear div based on first condition:
if(!$('.brandModelLineWrapper').next().is('div.clear')){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

Use next() with a specific selector to check
if(!$('.brandModelLineWrapper').next('div.clear').length){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

jQuery selector to find the last element

I will really appreciate if someone can tell me how this might be possible.
If I have the following html,
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
<span><hr class=​"tierEnd">​</span>
How can I select the last hr element?
Tried with last-child, last, last-of-type already

Use jquery :last selector
$(".tierEnd:last")

Use :last or .last()
$('hr:last')
or
$('hr').last()
Demo
last-child and last-of-type does not work in case of <hr>
In that case use $('span:last-of-type hr')

You may use the .last() jQuery method:
$(".tierEnd").last()
For some reason, it is thought to be faster than the pseudo selector.

jQuery("span > .tierEnd").last()
or
jQuery("span > .tierEnd:last")
Using span > .tierEnd will only select direct descendants of a span tag with tierEnd class

You should use the below selector to get the last <hr> element.
jQuery("span:last-child hr.tierEnd")
Please like if this helps you! Cheers :)

jQuery - Selecting a parent that has a child

I have a Div which may contain an INPUT with a class of "datepicker"
<div class="rereg-input180">
... some layers
<input class="one two datepicker three">
....
I need to apply a Style="clear" to the top div. However I don't want to if that div doesn't contain a datepicker child.
How do I select it?

You could also do:
$('.datepicker').closest('.rereg-input180').addClass('clear');

You can do this -
$div = $('.rereg-input180');
if($div.find('.datepicker').length){
// apply style
}

You can use this selector:
$('div.rereg-input180:has(:text.datepicker)').css('clear', 'both')

You can use .has() http://api.jquery.com/has/ assuming you want the clear both, if it's a clear class, the you can just .addClass() instead of .css()
$('.rereg-input180').has('.datepicker').css('clear', 'both');
if you want to be more specific you can do
$('.rereg-input180').has('input.datepicker').css('clear', 'both');

You could use: jQuery's .parent()
$(".datepicker").parent().css("clear","both");

How to find elements without a class in Jquery?

I have the following html
<div class="one">One<div>
<div class="two">two<div>
<div >three<div>
<div >four<div>
<div class="three">five<div>
How would I find the div elements which don't have a class attribute? ie three and four?

You can use :not selector
$('div:not([class])');
here is API
And a simple Fiddle

Use :not selector to filter
$('div:not([class])');

Combine the :not() selector with the attribute present selector [class].
$("div:not([class])")
jsFiddle.

Another option is to use .not() with Has Attribute Selector
$('div').not('[class]')

There are different ways to do it. You could use .children() to get the list and then index into that. Or you could look up the second element and use .next() to get its sibling.

Assuming you're not wanting to select all the dividers which have no classes, you can use nth-child to select specific ones if you know exactly where they are within a container. This will select your class-less dividers:
$('div:nth-child(3)') // Selects the third divider
$('div:nth-child(4)') // Selects the fourth divider
$('div:nth-child(3), div:nth-child(4)') // Selects both
JSFiddle example.
Alternatively you can select using .prev() and .next():
$('div.two').next() // Selects the divider after div class="two"
$('div.three').prev() // Selects the divider before div class="three"

jQuery first of type selector?

How would I select the first <p> element in the following <div> with jQuery?
<div>
<h1>heading</h1>
<p>How do I select this element with jQuery?</p>
<p>Another paragraph</p>
</div>

Assuming you have a reference to the div already:
$(yourDiv).find("p").eq(0);
If the first p will always be a direct child of the div, you could use children instead of find.
Some alternatives include:
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first");
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`
Note that the eq method will always be the fastest way to do this. Here's the results of a quick comparison of the eq method, :eq selector and :first selector (I didn't bother with the first method since it's just an alias of eq(0)):

$('div p:first')
answer was too short to post without this useless sentence.
Edit
This is definitely a slow option. After looking at Jame's speed test, it looks like jQuery selectors work best when they piggy back off of css selectors.

$("div p").first();
or $('div p:first');
Reference: http://api.jquery.com/first/
Keep in mind that first() matches only a single element, the :first-child selector can match more than one: one for each parent.

You almost know the answer (from your post title). There is a selector in jQuery called :first-of-type. Use it to find and add class to the first p tag automatically, like so:
$("div p:first-of-type").addClass('someClass');

$('div p').first()
Should work. I think.

This should work
$( "div p:first-of-type" ).css( "font-size: 10px" );
The above code finds the first paragraph in the div as #Denver pointed and changed its fonts-size to 10px
Here is an example that explains even more about jQuery first-of-type selector