How to Each Loop with Class Element in JQuery?

By Hardik Savani February 3, 2023 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:

Read Also: Laravel JQuery Ajax Loading Spinner 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>

I hope it can help you...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts