February 3, 2023
Category : Javascript
HTML
jQuery
How to Each Loop with Class Element in 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...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- How to Remove Special Characters from a String in JQuery?
- JQuery Remove All Numbers from String Example
- How to Download File using JQuery?
- How to use Laravel Variable in JQuery?
- Laravel JQuery UI Autocomplete Ajax Search Example
- JQuery Tooltip Example using JQuery UI Plugin
- How to Add CKEditor Required Field Validation in JQuery?
- How to Check If Element is Exists or Not in jQuery?
- How to Remove Specific Value from Array in JQuery?
- How to Remove undefined Value from Array in JQuery?
- How to Check Undefined, Empty and Null in JQuery?
- How to Convert Line Breaks to br in jQuery ?
- How to Check Object is Empty or Not in JQuery?
;void(0);){kind=link}