Question

我有一个UL列表，其中包含4个LI元素

<ul class="pagination " id="loadMore">
      <li class="page-item"><a class="page-link prevR" href="#"><i class="fa fa-angle-left"></i></a></li>
      <li class="page-item"><a class="page-link active" id="1" href="#">1</a></li>
      <li class="page-item"><a class="page-link" id="2" href="#">2</a></li>
      <li class="page-item"><a class="page-link" id="3" href="#">3</a></li>
      <li class="page-item"><a class="page-link" id="4" href="#">4</a></li>
      <li class="page-item"><a class="page-link nextR" href="#"><i class="fa fa-angle-right"></i></a></li>
  </ul>

我试图将li元素的id作为

$('#loadMore').on('click', function () {
   var page = $('#page');
   var msg = $('#loadMoreMsg');
   alert($(this).attr('id'));
   return false;
});

但它在警报中显示未定义，我尝试了很多解决方案，但没有任何效果，任何想法？

Answer 1

尝试以下代码

$('ul.pagination li').on('click', function () {
  var page = $('#page');
  var msg = $('#loadMoreMsg');
  alert($(this).find('a').attr('id'));
  return false;
});

这是工作的jsfiddle：http://jsfiddle.net/fqyhkd30/1/

Answer 2

如果它根本不起作用，那么我假设您要动态地附加列表。如果是这种情况，请使用以下内容：

appengine-web.xml

Answer 3

您的li根本没有id属性。li内有{id}的链接。

让他们这样做： -

$('#loadMore li').on('click', function () {
  alert($(this).find('a').attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination " id="loadMore">
  <li class="page-item"><a class="page-link prevR" href="#" id="prev">Prev<i class="fa fa-angle-left"></i></a></li>
  <li class="page-item"><a class="page-link active" id="1" href="#">1</a></li>
  <li class="page-item"><a class="page-link" id="2" href="#">2</a></li>
  <li class="page-item"><a class="page-link" id="3" href="#">3</a></li>
  <li class="page-item"><a class="page-link" id="4" href="#">4</a></li>
  <li class="page-item"><a class="page-link nextR" href="#" id="next">Next<i class="fa fa-angle-right"></i></a></li>
</ul>

Answer 4

我试图将li元素的id作为

你的li元素没有id attr。我想你想获得a id attr。

使用jQuery .delegate和.on进行操作。我们将事件绑定到ul#loadMore。

// .delegate
$('#loadMore').delegate('a', 'click', function() {
  
  var id = $(this).attr('id');
  var classL = $(this).attr('class');
  
  console.log(id, classL);
});


// .on 
//$('#loadMore').on('click', 'a', function() {
//  
//  var id = $(this).attr('id');
//  var classL = $(this).attr('class');
//  
//  console.log(id, classL);
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


<ul class="pagination " id="loadMore">
      <li class="page-item"><a class="page-link prevR" href="#"><i class="fa fa-angle-left"></i></a></li>
      <li class="page-item"><a class="page-link active" id="1" href="#">1</a></li>
      <li class="page-item"><a class="page-link" id="2" href="#">2</a></li>
      <li class="page-item"><a class="page-link" id="3" href="#">3</a></li>
      <li class="page-item"><a class="page-link" id="4" href="#">4</a></li>
      <li class="page-item"><a class="page-link nextR" href="#"><i class="fa fa-angle-right"></i></a></li>
  </ul>

Answer 5

使用e.target获取点击的元素。

$('#loadMore').on('click', function (e) {
  var id = $(e.target).attr('id');
   console.log(id);
 });

工作fiddle。

Answer 6

您需要设置所有id元素的li属性，例如brlow： -

<li class="page-item" id="value"></li>

Jquery获取li元素id

6 个答案: