ItSolutionStuff.com

How to Each Loop with Class Element in JQuery?

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

I hope it can help you...

Tags: jQuery
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube