jQuery selector to find the first child in each of a set of elements

I have this HTML:

<div id="tags">
    <ul>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
    </ul>
</div>

What selector would I use to capture the first anchor of each li element, and how about second anchor of each li without adding any extra ids or classes?

Well, I tried this:

$('#tags a:last-child')

And I was able to get the second anchor of each li, but I don't understand why that works. Wouldn't an element need to be inside the anchor to select something yet it is able to select the 2nd anchor of each li. Later on I didn't care how it worked, as long as it worked so I figure I would do the same thing to get the first element which would be:

$('#tags a:first-child')

Yet this does not work to get the first anchor of开发者_StackOverflow each li. Any ideas?

EDIT: So I guess I was doing it right, but it wasn't working because I had an input text box there which seems to make it not work. Why would it not work anymore once an input box is there?

What selector would I use to capture the first anchor of each li element

$("#tags li a:first-child") or $("#tags li a:nth-child(0)")

and how about second anchor of each li without adding any extra ids or classes?

$("#tags li a:last-child") or $("#tags li a:nth-child(1)")

the reason why the :*-child select works is because it's a filtering on the a tags, not the children of the a tags.

a :first-child => filters on the children of the a tag

a:first-child => filters on the a tags selected

Working example here: http://jsfiddle.net/7vupb/

The ":first/last-child" selector (and actually all 'child' selectors) take into account all the children, even those that aren't using the tag you're trying to filter.

So $('#tags a:last-child') works because in this case the anchor is the last child.

However, $('#tags a:first-child') doesn't work because input is the first child.

You can either use $('#tags a:not(:last-child)'), but this will get all anchor tags that are not last child, so if you have three it will select the first two, and if you have another element after the last anchor it will select all the anchors.

Or you can use $('#tags a:nth-child(2)'), but of course here it relies on the fact that the first anchor is a 2nd child, so if you remove the input elements, or add more elements in front of the first anchor then it won't work.

(You can think of the child selectors as having higher priority than the tag selectors. So, it first filters out the children, regardless of tag, or class, and then it looks at what tag you want. Which is counter intuitive and odd, I know :) )

$('#tags li').find('a:first') ...

You could also do something like:

$('#tags li').find('a').each(function(i){
   if(i==0){ //first item

   }
   if(i==1){ //second item

   }
});

This is what you want:

$('#tags a:nth-of-type(1)')

This will select all "a" descendants of the "#tags" element that are the first anchor element child of their parent. Just use 2 instead of 1 for the second anchors.