How To Break Each Loop In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of how to break each loop in jQuery, this loop is comparable to the JavaScript while(), do while(), and for() loops.
Each tag upon that HTML page is first searched by the each() loop, which then executes for every single tag.
For instance, if the each() loop is used for the p> tag, then this loop will iterate through every paragraph tag on the page.
Now move to the concept of how to break each loop in jquery.
Step By Step Guide On How To Break Each Loop In jQuery :-
jQuery’s each() method designates a function that executes for each matched element.
One of the most used traversal techniques in JQuery is this one. This technique allows us to loop through to the DOM elements of such jQuery object and perform a function for each matched element.
The callback function function(index,element), which is accepted as an argument by the each() function, runs for each element that has been chosen.
The two other parameters for this function, index and element, are optional. Consequently, we must supply the each() method with a callback function.
In order to break the loop early, the callback function might optionally return false.
Syntax :-
$(selector).each(function(index, element))
Parameter values :-
Following is a definition of the parameter used by the each() method.
- function(index,element): It is an essential parameter. It is an execution-based callback function that is called for each chosen element. The following definitions describe the values of its two parameters.
- index: A selector's location in the index is indicated by the integer value known as index.
- element: This is the present element. Currently matched element can be referred to by this keyword.
We'll utilise the return false function in jQuery to exit this loop. Here, it will serve as a "break" statement.
Unless all the components are traversed, it will continue if nothing is given.
Returning true signifies "continue," skipping to the following iteration.
Only by doing this with jQuery is it possible to end each loop.
The each() loop is built in the example below such that it traverses each li and executes the function for each one.
However, if a condition is implemented together with a return false, the loop becomes beaked if the condition evaluates to true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Talkerscode</title>
</head>
<body>
<h2>How to break each loop in jquery</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
<li>kiwi</li>
<li>lichi</li>
<li>cherry</li>
<li>strawberry</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('li').each(function(){
var fruit = $(this).text()
console.log(fruit);
if (fruit == 'Banana'){
return false;
}
})
});
</script>
</html>
- HTML and HEAD tags are used at the starting of our code.
- Next, we employ META tags.
- Next, with the aid of scripting, we use the jquery script library.
- Next, we give our page a title.
- Following that, we begin our body and include a heading using the H2 tag.
- After that, we make the list.
- After that, our main programme is concluded.
- We then begin our script.
- To begin running our jQuery code in the script, we use the ready() method.
- Next, we explore the list using an each loop.
- Next, we define the fruit variable, which stores the list of values.
- After that, we determine if our condition satisfies our criteria; specifically, if the loop breaks, the condition has been evaluated as true.
- SCRIPT & HTML tags are used to close out our code in the list.
Conclusion :-
As a result, we have successfully learned about the each() method in jQuery.
Additionally, we studied the idea of breaking each loop using jQuery. We can observe that when the function returns false, iteration ends.
I hope this article on how to break each loop in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
