How to access specific anchor tag element enclosed in in jQuery?

Question

I've a following HTML code snippet:

<ul id="popover-content" class="list-group" style="display: none">
  <a data-toggle="modal" data-target="#myModal-edit-event" href="ajax_edit_event.php?op=view&event_id={$eventDetails.event_details.event_id}" class="list-group-item" data-dismiss="modal">Edit Event</a>
  <a href="#" class="list-group-item">Invite Members</a>
  <a href="#" class="list-group-item">Delete Event</a>
</ul>

Now I want to access the first anchor tag element in jQuery. I want to write some logic when that anchor tag is clicked. Please note that I can't assign an Id to any of these anchor tags. If I assign the Id the intended other jQuery functionality doesn't work. So I don't want to make any change in above HTML code. Please suggest me a jQuery way solution for click event of first hyperlink. Better if you provide solution for all the three anchor tags.

Thanks.

Thanks

Answer 1

$( "ul a:first-child" ).click(function(){
 //Your code goes here
});

You should really do some more research next time on your own! That's a very very simple task ;).

Answer 2

Check: https://api.jquery.com/eq-selector/

So you can do

$( "#popover-content a:eq(1)" ).on('click', function(){
 //first
});

$( "#popover-content a:eq(2)" ).on('click', function(){
 //second
});

Answer 3

This will set a onclick handler on all the a progeny of "#popover-content:

$("#popover-content a" ).on('click',
    function () { 
        if ($(this).index() == 0) {
            //first
        } elseif ($(this).index() == 1) {
            //second
        } elseif ($(this).index() == 2) {
            //third
        }
    }
);