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

Jquery get text of unorder list line items

本文关键字：文本 列表 获取 无序 Jquery      更新时间：2023-09-26

我试图在无序列表中获取列表项的文本值，当项目被单击时。

我已经添加了一个事件侦听器，并在进一步操作之前将结果记录到控制台。

当我按类选择时，我只收到一个行项目，但无论你点击哪个链接，它都显示相同的链接文本。我尝试使用.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);
});

简介

你要做的事情叫做事件委托。您希望从父<div>中侦听从子<a>标签中冒出来的事件。

你可以通过使用jQuery的.on()函数来委托事件:

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

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

这里是更新的小提琴

基本上你有两个选择:

多个听众

$("#mapSelections a").on('click', function () {
    var text = $(this).text();
    alert(text);
});

这很好，但是您将事件侦听器绑定到几个元素(每个<a>标记一个侦听器)。每个选项都有一些开销，所以它不是您可用的性能最佳的选项。

事件代表团
$("#mapSelections").on('click', 'a', function () {
    var text = $(this).text();
    alert(text);
});

在我看来，这是最好的，因为你节省了应用程序的一些资源。您只将一个侦听器绑定到父$("#mapSelections")，然后该元素等待仅从子<a>标记中冒出的事件。

像这样?http://jsfiddle.net/q8nzR/1/

我刚刚编辑了几行jQuery:

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

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

您的问题是，THIS不是指单个a，而是指整个div#mapSelections

您应该将处理程序绑定到LI，而不是整个DIV。

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