Question

Is it possible to use the :first and :last selectors with jQuery’s on selector?

I want the first link in each list item to trigger the alert. However, at the moment, only the very first link triggers it.

The JavaScript code:

<script type="text/javascript">
    $(document).ready( function(){
        $('ul').on("click", "li a:first", function(event) {
            alert("test");
        });
    }
</script>

And the HTML:

<ul>
    <li>
        <a href="#">Trigger</a>
        <a href="#">Don't Trigger</a>
    </li>
    <li>
        <a href="#">Trigger</a>
        <a href="#">Don't Trigger</a>
    </li>
</ul>

Demo: http://jsfiddle.net/pjgalbraith/tuJnv/

Answer 1

Use :first-child instead

$('ul').on("click", "li a:first-child", function(event) {
    alert("test");
});

Demo: http://jsfiddle.net/joycse06/tuJnv/1/

As the doc says

The :first pseudo-class is equivalent to :eq(0). It could also be
written as :lt(1).

While this matches only a single element,
:first-child can match more than one: One for each parent.

:first will match only one element, first on selected set of elements. Where :first-child will find one(the first child) for each parent which is what you want.

Doc on :first and :first-child