如何在 jQuery 中访问 <ul></ul> 中包含的特定锚标记元素？答案

【问题标题】：How to access specific anchor tag element enclosed in <ul></ul> in jQuery?如何在 jQuery 中访问 <ul></ul> 中包含的特定锚标记元素？
【发布时间】：2016-01-17 14:13:34
【问题描述】：

我有以下 HTML 代码 sn-p:

<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>

现在我想访问 jQuery 中的第一个锚标记元素。单击该锚标记时，我想编写一些逻辑。请注意，我无法为这些锚标记中的任何一个分配 Id。如果我分配 Id，则预期的其他 jQuery 功能将不起作用。所以我不想对上面的 HTML 代码做任何改变。请建议我为第一个超链接的单击事件提供 jQuery 方式解决方案。如果您为所有三个锚标签提供解决方案，那就更好了。

谢谢。

谢谢

【问题讨论】：

那是无效的 html .... <a> 不能是 <ul> 的子级。在无效标记上使用选择器会产生不可预知的结果。还请展示您尝试过的内容
你试过什么？这个任务太简单了……
@nicael：我尝试通过使用 id 作为第一个锚标记来实现它。但其他功能停止工作。
@charlietfl：实际上它是我用于 UI 设计的 Bootstrap 框架，这就是它看起来只是它的原因。
bootstrap 是一个 CSS 框架。您的 html 仍然需要有效，并且 css 框架不会改变它。将外部更改为<div> 以使其有效或将<a> 包装在<li> 中

标签： javascript jquery html click jquery-click-event

【解决方案1】：

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

下次你真的应该自己做更多的研究！这是一个非常非常简单的任务；）。

【讨论】：

【解决方案2】：

检查：https://api.jquery.com/eq-selector/

所以你可以这样做

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

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

【讨论】：

【解决方案3】：

这将为"#popover-content 的所有a 后代设置一个onclick 处理程序：

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

【讨论】：