CODEWITHSUNDEEP
javascriptjquery
Muhammad Sipra
Muhammad Sipra

Reputation: 846

Jquery getting li element id

I have a UL list which has 4 LI elements like this

<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>

and i am trying to get id of the li element as 

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

But it shows undefined in alert, i have tried many solutions but nothing worked, any ideas ?

Upvotes: 0

Views: 8561

Answers (6)

Paras
Paras

Reputation: 32

You need to set id attribute of all the li element like brlow :-

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

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Your li don't have id attribute at all .It's the links inside li which have id's.

To get them do like below:-

$('#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>

Upvotes: 2

loelsonk
loelsonk

Reputation: 3596

and i am trying to get id of the li element as

Your li elements doesn't have id attr. I guess you want to get a id attr.

Here is how you do it, using jQuery .delegate and .on. We bind an event to 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>

Upvotes: 2

Dharmendra Poonia
Dharmendra Poonia

Reputation: 289

Use e.target to get clicked element.

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

working fiddle.

Upvotes: 1

selvarajmas
selvarajmas

Reputation: 1643

Try the following code

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

Here is the working jsfiddle: http://jsfiddle.net/fqyhkd30/1/

Upvotes: 4

Manish Jangir
Manish Jangir

Reputation: 5437

If it is not working at all, then I'm assuming that you are appending the list dynamically. If that is the case, then use the following:

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

Upvotes: 3

Related Questions