We Keep Coding

Accessing the 2nd member of a class in jQuery?

I have a stack of divs that belong to a specific class, say tabs. and the semantic structure looks something like this:
<div class = "tabs" >_______</div>
<div class = "tabs" >_______</div>
<div class = "tabs" >_____</div>
It's easy to access the first and the last element of the div like
$('.tabs:first') or
$('.tabs:last')
but getting to the 2nd (and assuming there are multiple other divs inside then the all divs other than first or last) seems to yield a syntax error to me such as :
$('.tabs:second') or $('.tabs:third') do not work expectedly.
Can anyone pinpoint what is wrong here?

Try using the eq() selector, notice the index is zero-based:
$(".tabs:eq(1)");

There are two ways to do this, either using the .eq() method or the :eq() selector.
The .eq() method:
The way the jQuery documentation recommend you do this is by making use of the .eq() method.
// eq() is zero-based, so this would get the second element
$('.tabs').eq(1)
A handy feature is that .eq() also can take a negative number, which causes the function to start from the end instead.
// This would take the second element from the end
$('.tabs').eq(-2);
The :eq() selector
jQuery also provide an :eq() selector, that basically work the same way the .eq() method does. So you could do this as well:
$('.tabs:eq(1)')
Notice that even though this work, it is preferred to use the .eq() method instead of the selector. The method has better performance in modern browsers and the :eq() selector does not support negative numbers, so it is somewhat more limited.

Take a look at the jQuery :first selector documentation:
http://api.jquery.com/first-selector/
You'll notice that this is a jQuery extension and not part of the CSS specification.
Also that :first is equivalent to :eq(0), that means if you want to get the second element, you can do it with :eq(1).
If you don't need a filter in the CSS selector, you can simply get the element with the .eq method like this:
$('.tabs').eq(0) // get the first element
$('.tabs').eq(1) // get the second element
$('.tabs').eq(2) // get the third element
$('.tabs').eq(-2) // get the second to last element
$('.tabs').eq(-1) // get the last element

trying to select the last element of a navigation bar

I'm trying to select the last element of a navigation bar that could have x number of elements. I know that jquery selectors are arraylike objects, so I have tried using bracket notation to select the last element:
$(".navLinks")[$(".navLinks").length - 1].text();
This has not worked. Can anyone help me out with this? How do you select an element within a jquery selector and then attach a method to that element?

Use the :last selector:
$(".navLinks:last").text();
Additional Information
You can read up on all jQuery's selectors here.

I guess
$('.navLinks:last').text();
will do it in a more convinient way.
Read more about selectors

Try:
$(".navLinks:last-child").text();

KISS - use the :last selector. More info here
$(".navLinks:last").text();

If you know the specific type of element you're looking for, .last() may be what you need. Here's an example with 'a'.
$(".navLinks a").last().addClass('myClass');

Using jQuery to delete all elements with a given id

I have a form with several spans with id="myid". I'd like to be able to remove all elements with this id from the DOM, and I think jQuery is the best way to do it. I figured out how to use the $.remove() method to remove one instance of this id, by simply doing:
$('#myid').remove()
but of course that only removes the first instance of myid. How do I iterate over ALL instances of myid and remove them all? I thought the jQuery $.each() method might be the way, but I can't figure out the syntax to iterate over all instances of myid and remove them all.
If there's a clean way to do this with regular JS (not using jQuery) I'm open to that too. Maybe the problem is that id's are supposed to be unique (i.e. you're not supposed to have multiple elements with id="myid")?

.remove() should remove all of them. I think the problem is that you're using an ID. There's only supposed to be one HTML element with a particular ID on the page, so jQuery is optimizing and not searching for them all. Use a class instead.

All your elements should have a unique IDs, so there should not be more than one element with #myid
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Neverthless, try this:
$("span[id=myid]").remove();

id of DOM element shout be unique. Use class instead (<span class='myclass'>).
To remove all span with this class:
$('.myclass').remove()

if you want to remove all elements with matching ID parts, for example:
<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>
try this:
$("span[id*=myID]").remove();
don't forget the '*' - this will remove them all at once - cheers
Working Demo

The cleanest way to do it is by using html5 selectors api, specifically querySelectorAll().
var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();
The querySelectorAll() function returns an array of dom elements matching a specific id. Once you have assigned the returned array to a var, then you can pass it as an argument to jquery remove().

You should be using a class for multiple elements as an id is meant to be only a single element. To answer your question on the .each() syntax though, this is what it would look like:
$('#myID').each(function() {
$(this).remove();
});
Official jQuery documentation here.

As already said, only one element can have a specific ID. Use classes instead. Here is jQuery-free version to remove the nodes:
var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');
for(var i = spans.length; i--;) {
var span = spans[i];
if(span.className.match(/\btheclass\b/)) {
span.parentNode.removeChild(span);
}
}
getElementsByTagName is the most cross-browser-compatible method that can be used here. getElementsByClassName would be much better, but is not supported by Internet Explorer <= IE 8.
Working Demo

Opposite of .find()

Is there an opposite of .find()?
Where $('.myclass').except('#myid');
Would grab all elements with .myclass except the element with #myid.
I know I could do $('.myclass[id=myid]') in this example, but seems like it would be helpful in other cases.
Thanks
EDIT:
Thanks for the responses! Looks like I just missed seeing .not() and :not() in the documentation.

$('.myclass').not('#myid');
http://api.jquery.com/not/

Try .not() – it removes any element matching the selector.

$('.myclass').not('#myid')

If you want a single string selector, then use this:
$('.myClass:not(#myid)')
This uses the :not() pseudo-class selector instead of the .not() filter function.
It seems counter-intuitive, but this single selector method may be slower at times, because getting elements via class (without filtering) is optimized, it filters each of those as the selector passes in this case.
The alternative, using .not() can be faster, depending on the number of elements matching .myclass, because finding an element by ID is a very fast operation, so excluding it from the set is rather quick.

Generic
$('selector:not(selector)').doStuff()
Specific
$('.myclass:not(#myid)').doStuff()
I believe is the correct solution.
Visit http://api.jquery.com/not-selector/
For more use cases and examples.

I think you're looking for not()

Yes there are. You can use either jQuery's :not selector or .not() function. Sample code:
$('.something').not('.else')
$('.something:not(.not-me):not(.neither-me)')
As a side note, CSS3 has native :not pseudo-class.

You're all wrong. Not is not strictly the opposite of Find because Not only searches the current elements and not the descendents, while Find() will search through descendants to see if a certain criteria matches. The opposite of Find is instead .Not(:has(...)).

Chaining selectors in jQuery

I'm a guy used to mootools' way of chaining selectors, and I can't seem to find anywhere how to do the same in jQuery.
Suppose I have a select element in the selectObj variable. What I need is to get the last option in that select.
In mootools I would have done something like:
var option = $(selectObj).getElement('nth-child(last)')
Can I do something similar, or what is the way of getting that last option in jQuery?
PS. I know about the parent > child selector, but I can't really use it because I don't know what selector has been used to get the select. I only have the resulting element.

$(selectObj).find(':last')
You can use find to perform another query within the current query.
In general, you can check out the Selectors and Traversal pages on jQuery docs when you're trying to figure out how to select something.

var option = $(selectObj).children(":last");
will return the last child of any element

You can also use .last() for this purpose.

jQuery has the :last Selector
$("tr:last").stuff()
Will do stuff to the last row in a table.