Người Viết : ViKiMi Editor

Sử dụng Break / Continue đối với jQuery Earch Loop. Tính đa dạng trong lập trình jQuery
Chúng ta thấy rằng sử dụng Break và Continue để Thoát khỏi vòng lặp hoặc tiếp tục vòng lặp trong jQuery rất hữu hiệu. Tuy nhiên, khi xem xét kỹ chúng ta cũng thấy rằng tới đây vòng lặp với Each là một điều không thể không nói cụ thể. Vì vòng lặp Each có một cách hoạt động rõ ràng khác biệt so với các vòng lặp thông thường như For hay While hay Do While.
Vậy cách chúng ta thực hiện Thoát khỏi vòng lặp hay Tiếp tục vòng lặp Each của jQuery sẽ như thế nào?
Liệu nó có giống với For hay While hay Do While không?
Câu trả lời là sẽ khác hoàn toàn nguyên nhân :
+ Với vòng lặp Each sẽ thực hiện thao tác trên từng phần tử duyệt qua dựa vào một Function được định nghĩa cho từng phần tử.
Cú pháp cơ bản :
.each( function )
Hoặc viết cách khác : $(‘selector’).each(function(){})
Chính vì vòng lặp Each sẽ thao tác dựa vào Function nên cách Thoát vòng lặp Each hoặc Tiếp tục vòng lặp Each sẽ không giống với những jQuery Loops thông thường như For , While , Do While
>> Cách để chúng ta Thoát hoặc tiếp tục vòng lăp Each của jQuery sẽ sử dụng câu lệnh Return. Cụ thể là :
Thoát : Sẽ sử dụng Return False
Tiếp Tục : Sẽ sử dụng Return True
Chúng ta có thể hiểu là câu lệnh Return sẽ giúp chúng ta làm việc được với Function trong vòng lặp Each. Do đó chỉ có thể sử dụng câu lệnh Return để Thoát hoặc tiếp tục vòng lặp Each.
CÁCH THOÁT HOẶC TIẾP TỤC VÒNG LẶP EACH TRONG jQUERY
Chúng ta sẽ xem một ví dụ cụ thể để có thể biết cách mà vòng lặp Each được thoát hoặc tiếp tục.
+ Câu lệnh Return sẽ được sử dụng
Example ::
<!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.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('table td').each(function() {
if ($(this).html() == "Apple") {
return true; /*** Trả về true để 'tiếp tục' lần lặp tiếp theo của vòng lặp jQuery each ***/
}
if ($(this).html() == "Banana") {
return false; // Trả về false để 'thoát' vòng lặp jQuery each
}
$(this).remove();
});
});
</script>
<title>Document</title>
</head>
<body>
<h2>How To Break Out Of jQuery Each Loop</h2>
<table>
<tr>
<td>Apple</td>
<td>Apple</td>
<td>Mango</td>
<td>Banana</td>
<td>Grapes</td>
</tr>
</table>
</body>
</html>
Hình Ảnh kết quả ::

Giải thích cho Example ở trên :
+ Với giá trị ‘Apple’ thì thực hiện lần lặp tiếp theo (giống như cách Continue hoạt động) của vòng lặp jQuery Each. Do đó câu lệnh Remove sẽ vẫn không thể thực hiện.
+ Khi gặp giá trị ‘Mango’ thì sẽ không chuyển qua lần lặp tiếp theo và cũng không Thoát khỏi vòng lặp của jQuery Each.
Tức là ở đây không thực hiện lệnh Return.
Do đó các câu lệnh trong Function vẫn sẽ được thực hiện một cách tuần tự từ trên xuống dưới. Khi gặp lệnh Remove thì sẽ tiến hành xoá phần tử ‘Mango’ khỏi Table
+ Khi gặp giá trị ‘Banana’ thì sẽ tiến hành Thoát khỏi vòng lặp Each
Tức là ở đây đã gọi lệnh Return False để thoát vòng lặp jQuery Each
Như vậy, chương trình đã thực hiện xong các lệnh jQuery. Và Chúng ta thấy kết quả được in ra như trên. Chúng ta đã thấy rõ ràng cách mà lệnh Return được sử dụng để Thoát vòng lặp hoặc tiếp tục lần lặp tiếp theo đối với vòng lặp jQuery Each.
Thật sự khác biệt so với những cách Thoát hay tiếp tục lần lặp tiếp theo của những Loops For, While, Do While.
Mang lại hiệu quả và cách làm việc khá thú vị trong lập trình.