Question

我有一个由模板生成器artisteer生成的以下菜单项：

<ul class="art-vmenu">

<li><a href="#" ><span class="l"></span><span class="r"></span>
        <span class="t">Home</span></a></li>    
<li><a href="#" ><span class="l"></span><span class="r"></span>
        <span class="t">Create User</span></a></li> 
<li><a href="#" class="active"><span class="l"></span><span class="r"></span>
        <span class="t">List Users</span></a></li>  
<li><a href="#"><span class="l"></span><span class="r"></span>
        <span class="t">Admin</span></a></li>   
</ul>

我想使用单个jQuery函数捕获<li>的onclick事件：我尝试过这个不完整的事情：

$(document).ready(function() 
{
   $('ul.art-vmenu li').click(function(e) 
   { 
    alert(this);
   });
});

我可以看到这是一个HTMLliElement，但无法弄清楚如何获取菜单文本或ID？

如何通过jQuery捕获菜单点击？

Answer 1

在这里，获取触发事件的菜单文本（似乎没有任何id）：

 $(document).ready(function() 
 {
    $('ul.art-vmenu li').click(function(e) 
    { 
     alert($(this).find("span.t").text());
    });
 });

Answer 2

在你的问题中，似乎你有span个选择器，每个span一个单独的类被赋予ul li选项，然后你有很多答案，即

$(document).ready(function()
 {
   $('ul.art-vmenu li').click(function(e) 
    { 
     alert($(this).find("span.t").text());
   });
});

但您无需使用ul.art-vmenu li，而是可以使用直接ul并使用 on ，如下例所示：

$(document).ready(function()
 {
  $("ul.art-vmenu").on("click","li", function(){
     alert($(this).find("span.t").text());
  });
});

Answer 3

我不确定您的问题是什么，但要获取您可以使用的li元素的文字：

$(this).text();

要获取元素的id，您可以使用.attr('id');。一旦你有了你想要的元素的引用（例如$(this)），你就可以在它上面执行任何jQuery函数。

Answer 4

您可以使用jQuery的attrib函数获取ID或任何其他属性。

$('ul.art-vmenu li').attrib('id');

要获取t跨度中的菜单文本，您可以执行以下操作：

$('ul.art-vmenu li').children('span.t').html();

更改HTML也很简单：

$('ul.art-vmenu li').children('span.t').html("I'm different");

当然，如果你想首先获得所有的span.t，那就更简单了：

$('ul.art-vemnu li span.t').html();

但我假设你已经得到了li，并想使用child（）来找到该元素中的内容。

Answer 5

键入$(this)将返回jQuery元素而不是HTML元素。然后它只取决于您在点击事件中想要做什么。

alert($(this));

Answer 6

this是一个HTML元素 $(this)是一个封装HTML元素的jQuery对象。

使用$(this).text()检索元素的内部文本。

我建议您参考jQuery API documentation以获取更多信息。

Answer 7

$(document).ready(function() {
    $('ul.art-vmenu li').live("click", function() {
        alert($(this).text());
    });
});

jsfiddle：http://jsfiddle.net/ZpYSC/

关于live（）的jquery文档：http://api.jquery.com/live/

描述：为现在和未来与当前选择器匹配的所有元素附加事件的处理程序。

<li>标签</li>的jQuery onclick事件

7 个答案: