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

We Are Recommending You

How to Remove Special Characters from a String in JQuery?

Read Now →

JQuery Remove All Numbers from String Example

Read Now →

How to Download File using JQuery?

Read Now →

How to use Laravel Variable in JQuery?

Read Now →

Laravel JQuery UI Autocomplete Ajax Search Example

Read Now →

JQuery Tooltip Example using JQuery UI Plugin

Read Now →

How to Add CKEditor Required Field Validation in JQuery?

Read Now →

How to Check If Element is Exists or Not in jQuery?

Read Now →

How to Remove Specific Value from Array in JQuery?

Read Now →

How to Remove undefined Value from Array in JQuery?

Read Now →

How to Check Undefined, Empty and Null in JQuery?

Read Now →

How to Convert Line Breaks to br in jQuery ?

Read Now →

How to Check Object is Empty or Not in JQuery?

Read Now →