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

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you how to use each loop with class element of html in jquery. When we are work on any application and need to use each loop in jquery then at that time we can follow this example code. each with html class we can get whole object of that class by using $(this) jquery function. And also in the following example we can see i get attribute data-id by using $(this).data(‘id’), so that means we can catch the current class data attribute value.

Example:
<html lang="en">
<head>
	<title>Each Loop with Class Jquery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
	<ul>
		<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>
	</ul>
    <script type="text/javascript">
	    $('.item-list').each(function() {
	    	var data_id = $(this).data("id");
	    	console.log(data_id);
		});
    </script>
</body>
</html>

Read Also : Example of unionAll in Query Builder Laravel

Thanks for read. I hope it help you. For more you can follow us onĀ facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →