Javascript Jquery获取无序列表行项目的文本

我试图在单击列表项时获取无序列表中列表项的文本值

我已经添加了一个事件侦听器，并在继续之前将结果记录到控制台

当我按类选择时，我只收到一个行项目，但无论单击哪个链接，它都会显示相同的链接文本。我尝试过使用

.eq（）

，

this

，以及其他一些方法，但无论哪种方法，我要么返回全部4个元素，要么不返回任何元素

HTML:

<div id="mapSelections"> 
<ul>
    <li>Jump to State : </li>
    <li id="Conn" ><a href="#">Connecticut</a> |</li>
    <li id="Maine"><a href="#">Maine</a> |</li>
    <li id="Mass"><a href="#">Massachusetts</a> |</li>
    <li id="Rh"><a href="#">Rhode Island</a> |</li>
    <li id="Home"><a href="#">Home</a></li>
</ul>

var link = document.getElementById('mapSelections');
link.addEventListener('click', function () {
   var text = $("li:eq()", this).text();
   console.log(text);
});

像这样

我刚刚编辑了jQuery的几行：

$('#mapSelections a').on('click', function () {


    var text = $(this).text();
    console.log(text);
    //alert(text);
});

您的问题是，这并不是指单个a，而是指整个分区的地图选择。

Brief 你想做的事叫做。您想从父函数

收听从子函数

冒泡的事件：

var link = document.getElementById('mapSelections');
$(link).on('click', 'a', function () {


    var text = $(this).text();
    //console.log(text);
    alert(text);
});


解释
基本上，有两个选项可以满足您的需求：

多个侦听器
这很好，但是您将事件侦听器绑定到多个元素（每个
标记有一个侦听器）。每一个都有一点开销，所以它不是您可以使用的性能最好的选项

活动代表团
这是最好的原因（IMO），因为您正在为应用程序节省一些资源。您只将一个侦听器绑定到父级
$（“#mapSelections”）
，然后该元素将等待仅从子级
标记中弹出的事件。您应该将处理程序绑定到
LI
，而不是整个
DIV

$("#mapSelections li").click(function() {
    var text = $(this).find("a").text();
    console.log(text);
});

如果使用jQuery，为什么要使用
addEventListener
，而不是使用jQuery的事件绑定方法呢？从技术上讲，使用
addEventListener
比使用jQuery的
。on（）
更快。但是document.getElementById（'mapSelections'）不选择链接，所以我不会这样做。我不是这么说的，你看过我的评论了吗？把你的答案和我的答案比较一下，你就会发现区别。我知道区别，它和其他人的一样。你的为每个孩子添加一个监听器（比如6个事件监听器），而我的只有一个。
.on（）
中的第二个参数允许您选择事件需要从哪些元素中冒泡感谢您的解释这与我所做的后半部分很好。这不是一个好的解决方案。您正在绑定多个侦听器（每个
li
）并解析结果以查找
。这对于OP试图做的事情来说是不必要的，也不是好的JS实践的例子。我认为这是非常惯用的jQuery用法。除非它是一个不起作用的解决方案，否则我认为它不值得否决。不，惯用jQuery更像是
$（“#mapSelections a”）
或我提供的答案。这个问题说你可以点击LI，而不仅仅是A。你的答案有不必要的限制。实际上，这个问题没有提到在任何地方点击
。
$("#mapSelections").on('click', 'a', function () {
    var text = $(this).text();
    alert(text);
});

$("#mapSelections li").click(function() {
    var text = $(this).find("a").text();
    console.log(text);
});