Question

我有无序列表;

<ul id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>

上面的列表是使用ajax和jquery动态生成的，执行正常没有问题。问题是我想在用户点击其中任何一个时获取列表的ID，而我目前正在使用下面的代码，它给出了第一个列表元素的ID。

$(document).ready(function(){

   $('#names').click(function(){
   var name=$('#names li').attr('id');

   alert(name);
  });

上面的代码执行得很好但不是我想要的输出。我需要任何帮助，建议或批评。谢谢，我很感激。

Answer 1

试试这个：

$(document).ready(function(){

   $('#names li').click(function(){
      var name = this.id;

      alert(name); 
   });
});

但你应该创建有效的HTML！嵌套在li中的li无效

也许这样更好：

<ul id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>

Answer 2

那个html不正确，你可以把ul放在li下但是不能把li放在li下面。除此之外，如果动态生成ul列表，则不能使用click事件。尝试“开启”事件。

$('#names').on('click', function(){ 
...

Answer 3

HTML：

<ul class="my-items" id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>

jQuery委托附加一个侦听器，用于捕获li下id="names"

下

jQuery(function() {
   jQuery(document).on('click', '#names li', function(e) {
      var clickedLi = e.currentTarget.id;
   });
})

个元素的所有点击次数

{{1}}

这是一个jsFiddle，其中有一个工作示例。

Answer 4

试试这个

$(document).ready(function(){
   $('#names').click(function(){
       $('#names li').each(function(){
           alert($(this).attr('id'));
       });
  });
});

Demo

如何在Jquery中选择ID

4 个答案: