How to use each loop with class element of html in Jquery?

By Hardik Savani | March 4, 2016 | | 732 Viewer | Category : Javascript HTML jQuery

Share this post:

Whenever you need to use each loop in jquery then you can follow this example code. each with html class you can get whole object of that class using $(this) jquery function. In following example you can see i get attribute data-id using $(this).data('id'), that means you can take current class data attribute value.


<html lang="en">


<title>Each Loop with Class Jquery</title>

<script src=""></script>




<li class="item-list" data-id="1">Apple</li>

<li class="item-list" data-id="2">Banana</li>

<li class="item-list" data-id="3">Mango</li>

<li class="item-list" data-id="4">Chairy</li>


<script type="text/javascript">

$('.item-list').each(function() {

var data_id = $(this).data("id");