Người Viết : ViKiMi Editor

Hướng dẫn thực hành câu lệnh vòng lặp Each trong jQuery, xử lý giao diện Website đẹp
Tương tự những câu lệnh vòng lặp khác trong jQuery, sử dụng vòng lặp each cũng có thể xem là một cách có thể kiểm soát tốt các phần tử phục vụ cho lập trình Website. Vòng lặp Each cho phép kiểm soát chỉ định hàm chạy trên từng phần tử HTML phù hợp. Điều này giúp cho Lập trình viên có thêm lựa chọn khi đưa ra các xử lý khác nhau.
Vậy chúng ta có thể dễ dàng sử dụng vòng lặp Each?
Câu trả lời là thật dễ dàng để sử dụng vòng lặp Each.
Và chúng ta có thể vận dụng câu lệnh vòng lặp này thật nhanh chóng, hiệu quả.
Một ngôn ngữ lập trình bình thường có những gì thì bạn cũng có thể tìm thấy những thứ như vậy với jQuery.
jQuery đem lại cho chúng ta nhiều thứ khi lập trình :
+ Truy vấn và tìm những phần tử HTML (Giao diện)
+ Các khai báo biến thông thường
+ Các định nghĩa chức năng hàm để có những xử lý khác nhau
+ Các biểu thức tính toán cần thiết
+ Các tập hợp lệnh có điều kiện, tập hợp lệnh vòng lặp có điều kiện etc…
+ Các tác vụ xử lý kết nối dữ liệu, xử lý File cần thiết etc…
Chúng ta có thể làm được rất nhiều thứ khi lập trình với jQuery.
Nếu bạn quen với những câu lệnh vòng lặp thì bạn cũng thấy rằng jQuery cũng cung cấp cho chúng ta đầy đủ những câu lệnh vòng lăp như bất kỳ ngôn ngữ nào, cách sử dụng cũng vậy. Và chúng ta có thể xem qua những câu lệnh vòng lặp có thể có :
+ Câu lệnh vòng lặp While
+ Câu lệnh vòng lặp Do … While
+ Câu lệnh vòng lặp For
+ Câu lệnh vòng lặp For-each
Thực hiện xử lý dữ liệu nhờ những lệnh vòng lặp giúp ích cho các lệnh có điều kiện và dễ dàng tạo một chương trình xử lý các dữ liệu phức tạp. Do đó, nếu bạn sử dụng jQuery thì tập những câu lệnh vòng lặp là điều bạn cần biết và quen thuộc.
Chúng ta sẽ xem cách làm việc của từng câu lệnh vòng lặp trong jQuery.
LỆNH VÒNG LẶP EACH
Phương thức each() chỉ định một hàm để chạy cho từng phần tử phù hợp. Sử dụng jQuery truy vấn các phần tử phù hợp và kết hợp sử dụng phương thức each()
+ Nếu bạn muốn dừng vòng lặp sớm thì có thể sử dụng lệnh return false
[ Các vòng lặp có thể thực thi một khối mã miễn là một điều kiện cụ thể là đúng ]
Cú pháp của lệnh vòng lặp Each :
$(selector).each(function(index,element){
// code block to be executed
});
Lưu ý : Function là được yêu cầu
§ index – Vị trí chỉ mục của bộ chọn
§ element – Phần tử hiện tại (cũng có thể sử dụng bộ chọn “this”)
Chúng ta sẽ xem một ví dụ cụ thể để dễ dàng làm việc với lệnh each trong jQuery. Điều này, giúp tạo một Giao diện người dùng tốt hơn.
EXAMPLE ::
Sử dụng vòng lặp each trong jQuery, Tạo hiển thị tốt hơn cho Table Sản Phẩm trên một Trang Web buôn bán. Table sẽ hiển thị nổi bật các sản phẩm tốt nhất với mã giảm giá của sản phẩm, và thông tin Sale.
Nội dung Code của vòng lặp each :
$(“.price_product”).each(function () {
value = parseFloat($(this).text());
if(value >= 200000){
$(this).append(“<h2>Sale <i style= ‘color:blue;’ > 20% </h2> </b>”);
}else{
$(this).append(“<h2>Sale <i style= ‘color:blue;’ > 15% </h2> </b>”);
}
});
Nội dung Code đầy đủ trên trang sanpham.html
Hình Ảnh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var j, element_2, var_2, value;
var couponElements = $(".product_coupon");
var rowElements = $("tr");
$(".price_product").each(function () {
value = parseFloat($(this).text());
if(value >= 200000){
$(this).append("<h2>Sale <i style= 'color:blue;' > 20% </h2> </b>");
}else{
$(this).append("<h2>Sale <i style= 'color:blue;' > 15% </h2> </b>");
}
});
for (j =0 ;j < rowElements.length; j++) {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b style='color:green;'> In BEE SHOP </b>");
}
element_2 = rowElements.eq(j); /* Select table row based on row index */
if(element_2.find(".product_coupon").length){
var_2 = element_2.find(".product_coupon").text();
if( var_2 == "Get Coupons"){
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
}
}
}
});
});
</script>
</head>
<body>
<p id="welcome_to_Bee"> Loading ... </p>
<p id="test">These are products <b>in Bee Shop</b> .</p>
<table class="tbl_company" border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Coupons</th>
</tr>
<tr>
<td>Quần Áo</td>
<td><p class="price_product">200000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Giày Dép</td>
<td><p class="price_product">300000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Mũ Nón</td>
<td><p class="price_product">150000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Trang Sức</td>
<td><p class="price_product">150000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Mỹ Phẩm</td>
<td><p class="price_product">500000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
</table>
<br/>
<button id="btn1">Best Sale</button>
</body>
</html>
Như vậy, thật đơn giản khi sử dụng câu lệnh Each trong jQuery. Vòng lặp Each trong jQuery cho phép tạo ra xử lý nhiều lần để thực thi khối mã lệnh, khối mã lệnh sẽ chứa các yêu cầu thiết kế cần thiết. Nhờ vòng lặp Each chúng ra sẽ xử lý phần giao diện hiển thị tốt hơn, đồng thời cũng tăng tốc tốt cho Website. Nguyên nhân đó là tất cả xử lý hiển thị sẽ thực hiện trên phía Client, nhờ vậy tốc độ tốt hơn, linh hoạt hơn.
Thật tốt khi sử dụng jQuery!