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

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


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.

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>



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

Featured Post