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

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


Share this post:

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>