We Keep Coding

Getting ALL First links in a specific class

So I know that using "a:first" will get the first link of a page. Lets assume we have the following:
<div class="masterclass">
Link 1
Link 2
</div>
<div class="masterclass">
Link 1
Link 2
</div>
Naturally I can use the following code to get the first "a" of the class "masterclass"
$('.masterclass a:first').click(function() {
alert('yayfirstlink');
});
However I do not understand how to get the first link of every "masterclass"

You need to use find() here because your selector will find all the anchor elements with in .masterclass then filter only the very first one. But when you use .find(), it will find all the .masterclass elements first then will find the first anchor element in each of them.
$('.masterclass').find('a:first').click(function() {
alert('yayfirstlink');
});
or if you are sure that the target element will be the first child of its parent then you can use :first-child
$('.masterclass a:first-child').click(function() {
alert('yayfirstlink');
});

Try this,
var oFirstAnchor = $(".masterclass a:first-child");

$(".masterclass a:first-child") is what you are looking for.
so:
$('.masterclass a:first-child').click(function() {
alert('yayfirstlink');
});

This is how u loop through each of the masterclass and get the first link of it.
i don't know what you want to do with it though so i can only provide this
$(document).ready(function(){
var fields = $('.masterclass a:first-child');
$.each(fields, function(index, val){
alert(index);
});
});
this alerts the current links array index
http://jsfiddle.net/kBd82/6/

I would recommend using the first of type selector for this.
$('.masterclass a:first-of-type')
This way it will always select the first anchor tag in each masterclass div even if you put other things in the div later.
http://api.jquery.com/first-of-type-selector/

jquery select multiple while traversing DOM

I am trying to select all elements with the "findme" class, and from those get the selects that are nearby them.
http://jsfiddle.net/R93md/1/
Specifically I have tried
$(".findme").parent().prev().first();
then once I have all selects I plan on doing a
.each(function (){doSomething(this);})
to each select. I am stuck getting the selects because it seems that I am never going down and retrieving the contents of the span.

$(".findme").closest("td").find("select").each(function() {
doSomething(this);
});

I think you should follow this:
$('.findme').each(function(){
var el = $(this).closest('td').find('select');
dosomething(el);
});

I would first grab the parent <td> element and then use find() like so
$('.findme').parents('td').find('select').each(function(){
...
});
http://jsfiddle.net/JYGK3/
Edit:
In review of the other answers here, I've concluded that you probably should use closest() rather than parents(). If the table is nested, it could produce unwanted results.
http://jsfiddle.net/JYGK3/1

You can use .closest() to go up to the common <td> and then .find() to go down from there to find the neighboring <select>:
$(".findme").each(function() {
var select = $(this).closest("td").find("select");
// now do what you want to with the neighboring select object
// here you have access to both this which is the findme object
// and select which is the select object
});

Getting previous element of given in dom model

I have list of elements on my page
input
input
span
input
span
etc
I want to select each input that sits before each span, and after do, whatever i will have to. Is there any available ways to do that?

Use prev() to select the previous input of any given span:
$(this).prev("input");
If you're trying to select all previous inputs of all spans in 1 selector try this:
​$("span").prev("input");
http://jsfiddle.net/6hPRa/1/
$("span").prev("input").css("background-color", "pink");​

You have to use .prev()
ex :
$('span').prev("input") //this is input element

Use .parent() or .parents('.selector').first()
jQuery('.given').parent();
OR without jQuery
var el = document.getElementById('id');
el.parentNode...
AHH, previous-element...
Ok, now you have an answer.
Further there is a method
.siblings()
If you want the prev-prev element do so
jQuery('.given').prev().prev();

It's not that easy to define which one should be the first, I suggest go with set tabindex for each of them, and then with that using that as a selector you can always easily grab the previous one or next one

I want to limit 3+ select boxes to only pick one <option> once - what am I doing wrong?

I set up my jQuery like so.
It successfully lets me pick an option only once throughout the 3 dropdowns.
However, if I remove a dropdown (use the convenient button), an option is forever disabled (greyed out).
You'll see what I mean. First, ensure that it works and you can not select the same option more than once.
Now, remove and notice that one has been disabled, and it can never be selected again.
I don't know why it is forever greying out my option? It seems to keep picking it up when making the selectedIndexes array.
Does anyone know how to get around this problem?

I made some changes to your code, you can see them here. It also did not work for my in the beginning, but now it works, I think, as expected. If you have questions, just comment :)
Here we go:
Redeclare the $selects array once you remove an element. The reference to the element is still in the array, so when you later compute the selected indexes, it will still be there!
select.next('button').click(function(event) {
event.preventDefault();
select.remove();
$(this).remove();
$selects = $('select'); // <-- redeclare selects here, one is gone!
});
In the select click handler, use nth-child instead of eq. The former one will select all options that are the ith child of their parents. Whereas eq will only select the ith element from the set of matched elements (i.e. it will only return one element). Note that the index of nth-child is one-based.
// Remove them from this dropdown
$.each(selectedIndexes, function(i, index) {
// use n-th child here to get the child of each select.
// eq only selects the element from the matched set
$thisSelect.find('option:nth-child('+(index+1)+')').attr("disabled","disabled");
});

I believe you need to add code to this function to remove the related value from the array of selected values:
select.next('button').click(function(event) {
event.preventDefault();
select.remove();
$(this).remove();
});
Alternatively, you could add an array to track the value that was selected in the dropdown being removed at the time of removal, and then exclude those values from the other function, where you grey out values that are used.

demo
it's because of this line, var $selects = $('select');.
yes you removed the select element but not on that var $selects.
this will fixed it...
select.remove();
$(this).remove();
$selects = $selects.not(select);
or
like this,
$(this).remove();
$selects = $selects.not(select.remove());

OK, so I was going to point out as the other answers did that you need to "recollect" your $select variable to have the most current items. However, your script failed for me so I took a different approach. Below is my code. You can also demo it here and a fully commented version is available here.
var $selects = $('select');
$selects
.after('<button>remove</button><br /><br />')
.each(function(i, el) {
$(this)
.next()
.click(function(e) {
e.preventDefault();
$(el).remove();
$(this).remove();
$selects = $('select');
$selects.change();
});
})
.change( function() {
$selects
.children().removeAttr("disabled").end()
.each(function(i, el){
$selects
.not(this)
.find(':selected')
.each(function(){
$(el).find('option')
.eq($(this).index())
.attr('disabled', true);
});
});
})
.change();
​

even after removing select element $selects array contained reference to it. I've modified $selects.each function:
$selects.each(function() {
var select = $(this);
select.next('button').click(function(event) {
event.preventDefault();
$selects=$selects.not(select);//ADDED THIS LINE
select.remove();
$(this).remove();
});
});

How to gain access to an element on the same level in the DOM?

<div id="dad">
<img id="mum">
<input>
</div>
With jQuery, how could i get access to the input element, get is value or set it for example? I can't work out how to access something on the same level.. and i dont want to be using ID's, just parent/child nodes so i can use the code for loads of dad div's
Thanks!

an addition to Zed,
$(this).parent().children('input');
if you give a name to your input field then you can easily select throughout the others,
$(this).parent().children('input[name=my_input]');
then you can give any value as:
$(this).parent().children('input[name=my_input]').val('any value');
Sinan.

var myEl = $("#dad").children(":input");

$(this).parent().children() ?

Try this, to find the first child input element:
jQuery("div").find("input:first")

If i understand question, you would like achieve input from mum leve?
So try $("#mum ~ input")...
BTW, great site to search jquery function by category http://visualjquery.com/ +nice example.

I guess you want to find siblings (node with same depth and same parent and in DOM tree)
$(el).next() - next element (sibling) for all elements in the set
$(el).nextAll - all following siblings
$(el).nextUntil - all following siblings, stop on some condition (not including first "bad match").
Besides, you have next adjacent selector (+) and next sibling selector.
The same about prev, prevAll and prevUntil.
And you even have a siblings method.
Check this out.