Hướng dẫn how do you repeat a div in html? - làm thế nào để bạn lặp lại một div trong html?

Những gì bạn sẽ học

• Cách thực hiện Chỉ thị cấu trúc tùy chỉnh trong Angular
• Cách sử dụng các biến mẫu
• Cách thực hiện NGFOR tùy chỉnh cho các nhu cầu cụ thể của bạn
• Cách tái cấu trúc mã thành phần bằng cách sử dụng các chỉ thị

Giới thiệu

Hầu như hàng ngày, chúng tôi bắt gặp nhiệm vụ để hiển thị danh sách thời gian trong chế độ xem thành phần. Điều này bao gồm lặp lại HTML và giải pháp phổ biến là sử dụng

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

<>Copy
<div *ngFor="let item of items"> div>

Nhưng bạn có biết dấu hoa thị này được sử dụng cùng với phần

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

<>Copy
<ng-template ngFor let-item [ngForOf]="items">
	<div> div>
ng-template>

Nhưng bạn có biết rằng chúng ta có thể tạo ra các chỉ thị cấu trúc của riêng mình không? Trên thực tế, có những trường hợp khi đó là một ý tưởng tốt để xây dựng một chỉ thị cấu trúc tùy chỉnh để hiển thị một mẫu yêu cầu lặp lại HTML. Đặc biệt nếu bạn muốn lặp lại các yếu tố tương tự - như trong một số tiện ích xếp hạng, bao gồm 5 yếu tố UI của ngôi sao. Bạn có thể tưởng tượng cú pháp cho trường hợp này có thể tương tự như được trình bày dưới đây:

Trong hướng dẫn này, chúng tôi sẽ học cách tạo một chỉ thị, từng bước, bằng cách thực hiện một chỉ thị cấu trúc để lặp lại các yếu tố HTML. Tôi cũng sẽ chạm nhanh vào việc chuyển đổi mà trình biên dịch áp dụng cho cú pháp Asterisk, biến mẫu và so sánh cách tiếp cận của chúng tôi với góc

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

HTML động

Kết xuất các yếu tố

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Kết xuất các phần tử

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Chúng tôi có thể tìm thấy một ví dụ về điều đó dưới đây:

Mã này sử dụng chỉ thị

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Một ví dụ khác về phương pháp đó, nhưng sử dụng Chỉ thị

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Mã trên sẽ hiển thị các phần tử

Có các trường hợp sử dụng khi các chỉ thị tiêu chuẩn là không đủ. Các dự án của chúng tôi thường yêu cầu các cơ chế cụ thể và các hành vi tùy chỉnh và chúng tôi phải thực hiện các khái niệm của riêng mình cho điều đó.

Kết xuất nhiều yếu tố dựa trên một số

Chúng ta có thể nghĩ về một trường hợp mà chúng ta muốn hiển thị một số mục. Để làm cho ví dụ cụ thể hơn, chúng ta hãy nói rằng chúng ta muốn hiển thị các ngôi sao trong một số chế độ xem và số lượng ngôi sao là động, được cung cấp trong một số biến.

Quan điểm có thể trông như sau:

Cách tiếp cận NGFOR

Làm thế nào chúng ta có thể thực hiện một quan điểm như vậy? Chà, chúng ta có thể sử dụng

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Lớp thành phần phải cung cấp biến

for(var i=0;i<("how many repeat do you want");i++){
   $("#divRepeat").append($(".box").html());
   //you can add other logic here, like you want diferent id or class to add in new box
}

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Lưu ý rằng mảng có các mục trống vì nó chỉ được khởi tạo với kích thước 5 và đó là tất cả những gì chúng ta cần. Chúng tôi không thực sự sử dụng các mục cụ thể của mảng - chúng tôi chỉ quan tâm đến mảng cho

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Cách tiếp cận này, sử dụng

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Chỉ thị tùy chỉnh

Chúng tôi sẽ sử dụng các chỉ thị cấu trúc để giải quyết vấn đề chính của chúng tôi. Vì vậy, để liên tục tạo ra các yếu tố, nhiều lần như chúng ta muốn.

Chúng tôi sẽ bắt đầu bằng cách tạo một chỉ thị và thực hiện nó theo cách mà nó hiển thị một phần tử duy nhất. Nói cách khác, nó nên thêm vào DOM một chế độ xem, được tạo dựa trên mẫu được cung cấp.

Chúng ta hãy bắt đầu bằng cách tạo một chỉ thị (chúng ta có thể sử dụng CLI góc để tạo nó cho chúng ta). Chúng tôi sẽ gọi nó là một chỉ thị lặp lại

Lớp lệnh trống trông như sau:

Chúng tôi có thể sử dụng nó ngay bây giờ trong mã thành phần HTML của chúng tôi để xem điều gì sẽ xảy ra. Vì vậy, thay vì sử dụng trước đây của

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Điều gì xảy ra khi chúng ta chạy nó và kiểm tra nó trực tiếp? Chà, chúng tôi đã thắng được nhìn thấy bất kỳ ngôi sao nào, thậm chí không có một ngôi sao nào. Tại sao vậy?

Angular kết thúc phần tử

for(var i=0;i<("how many repeat do you want");i++){
   $("#divRepeat").append($(".box").html());
   //you can add other logic here, like you want diferent id or class to add in new box
}

Đây là một mẫu bây giờ, vì vậy nó đã giành được tự động vào DOM. Chúng ta cần phải thực hiện điều đó một mình. Hãy để làm điều đó!

Đầu tiên chúng ta cần tiêm tham chiếu vào mẫu và thùng chứa trong hàm tạo:

Với điều đó, chúng ta có thể làm việc để hiển thị mẫu. Hiện tại, hãy để don don nghĩ về việc hiển thị mẫu nhiều lần - chúng tôi sẽ làm điều đó sau. Ngay bây giờ, tập trung vào kết xuất đơn giản.

Cú pháp để tạo chế độ xem và chèn nó vào DOM thực sự rất dễ dàng - nó là một chức năng duy nhất trong lớp

for(var i=0;i<("how many repeat do you want");i++){
   $("#divRepeat").append($(".box").html());
   //you can add other logic here, like you want diferent id or class to add in new box
}

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Chúng tôi sẽ thêm dòng này vào móc vòng đời

";
}
?>

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Chỉ thị như vậy nên thêm vào DOM, một yếu tố duy nhất. Hãy để kiểm tra ứng dụng trực tiếp:

Chỉ thị hoạt động như mong đợi.

Bây giờ chúng ta có thể tập trung vào việc thêm vào nhiều yếu tố DOM, nhưng trước tiên, chúng ta cần biết chúng ta nên hiển thị bao nhiêu yếu tố.

Cho rằng chúng ta có thể sử dụng thuộc tính đầu vào, vì vậy số sẽ được cung cấp khi áp dụng Chỉ thị. Các thuộc tính đầu vào hoạt động giống như trong thế giới thành phần. Vì vậy, chúng tôi có thể tuyên bố chúng như sau:

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Và sau đó, cung cấp dữ liệu trong HTML như thế này:

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Có một mẹo thú vị mặc dù. Nếu tên của đầu vào sẽ giống như bộ chọn chỉ thị, thì cú pháp có thể được đơn giản hóa. Hãy xem triển khai đầu vào như vậy:

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Chúng tôi không muốn thay đổi tên thực tế của biến, bởi vì nó giải thích nhiều hơn theo cách này, nhưng chúng tôi có thể thay đổi tên đầu vào theo quy ước được mô tả ở trên. Với mã đó, chúng tôi có thể sửa đổi HTML như sau:

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Điều đó tốt hơn, phải không? Nó cũng nhìn kỹ hơn vào các chỉ thị phổ biến mà chúng ta biết, chẳng hạn như

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Bây giờ, khi chúng ta có số lượng các yếu tố chúng ta muốn kết xuất, chúng ta thực sự có thể thực hiện điều đó. Chúng tôi sẽ sử dụng một vòng lặp

";
}
?>

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Chúng tôi có thể kiểm tra ứng dụng trực tiếp và nó hoạt động chính xác như chúng tôi muốn:

Thuận lợi

Có rất nhiều lợi thế của phương pháp này. Cái chính được liệt kê dưới đây:

Khả năng đọc - Khi đọc mã HTML, nó rõ ràng hơn nhiều về cách nó sẽ hoạt động khi sử dụng chỉ thị của chúng tôi: — when reading the HTML code, it’s far more obvious how it will behave when using our directive:

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Dễ dàng sử dụng lại - nó rất dễ sử dụng tính năng này ở những nơi khác. Nó chỉ là vấn đề áp dụng chỉ thị trong

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Đơn giản - Logic được chuyển từ thành phần này sang chỉ thị khác, vì vậy các chi tiết triển khai được ẩn. Điều duy nhất mà người dùng cuối phải quan tâm là cung cấp có bao nhiêu mặt hàng cần được hiển thị bằng cách sử dụng giá trị số đơn giản! Không cần tạo một mảng có kích thước cụ thể. — the logic is moved from component to directive, so the implementation details are hidden. The only thing the end-user has to care about is to provide how many items need to be rendered using a simple number value! No need for creating an array of a specific size.

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.box'), 5, true);

Bit sâu

Phần này giải thích các khái niệm được sử dụng trong hướng dẫn này bằng cách đi sâu vào các tính năng góc.

Chỉ thị cấu trúc

Chỉ thị trong Angular có thể phục vụ nhiều mục đích. Chúng được chia thành hai nhóm, chỉ thị cấu trúc và chỉ thị thuộc tính. Trong hướng dẫn này, chúng tôi sẽ tập trung vào nhóm đầu tiên - nhóm chỉ thị thay đổi cấu trúc DOM.

Chỉ thị cấu trúc xác định cấu trúc DOM và đó chính xác là những gì chúng ta cần. Chúng tôi muốn thêm các yếu tố vào DOM.

Làm thế nào để một chỉ thị tương tác với DOM? Nó sử dụng hai yếu tố chính:

• Mẫu - Lưu trữ thông tin về phần tử để kết xuất - stores information about the element to render
• Xem - Container là tài liệu tham khảo của chúng tôi để tương tác với DOM - the container which is our reference for interacting with the DOM

Cả hai yếu tố có thể được tiêm vào hàm tạo chỉ thị, như sau:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

";
}
?>

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

";
}
?>

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Angular sẽ biên dịch điều này theo cách như vậy:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Phần tử

";
}
?>

";
}
?>

";
}
?>

NGFOR

Chỉ thị

<>Copy
<div *ngFor="let item of items"> div>

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Sự khác biệt chính là

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

<>Copy
<div *ngFor="let item of items"> div>

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

<>Copy
<div *ngFor="let item of items"> div>

Dưới đây là một hướng dẫn độc đáo về

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Biến mẫu - Tính năng thưởng

Chỉ thị của chúng tôi hoạt động tốt, nhưng có một điều nữa có thể được cải thiện. Khi sử dụng

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Hàm tạo ra chế độ xem, hỗ trợ truyền một đối tượng tùy chọn, sẽ được sử dụng để điền vào các biến mẫu. Các biến này có thể được sử dụng khi cần thiết. Để tham khảo biến, chúng tôi sẽ sửa đổi mã HTML của chúng tôi một chút:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Để thực hiện logic để giữ chỉ số của phần tử cụ thể, chúng tôi thêm đối tượng làm đối số thứ hai, khi tạo chế độ xem:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Chúng tôi đang sử dụng tham số gọi là

<>Copy
<ng-template ngFor let-item [ngForOf]="items">
	<div> div>
ng-template>

<>Copy
<ng-template ngFor let-item [ngForOf]="items">
	<div> div>
ng-template>

Bản tóm tắt

Các chỉ thị cấu trúc rất mạnh mẽ và có thể cực kỳ hữu ích khi sửa đổi cấu trúc DOM. Chúng ta có thể tự nhiên nghĩ về việc giải quyết các vấn đề trong các thành phần của chúng ta, nhưng thường sẽ dễ dàng hơn nếu chúng ta đặt các chỉ thị vào phương trình.

Thực hiện một phương tiện chỉ thị tùy chỉnh, các thành phần đó sẽ có ít mã hơn, HTML sẽ dễ đọc hơn và cuối cùng, sẽ có ít sao chép mã hơn. Logic trong chỉ thị sẽ dễ dàng hơn để kiểm tra và hiểu. Tôi khuyến khích bạn sử dụng các chỉ thị trong các dự án của bạn và vui vẻ khám phá khả năng của họ.

Dưới đây là một liên kết đến Stackblitz với mã hoàn chỉnh cho hướng dẫn này.

Nếu bạn không nhớ tất cả mọi thứ, hãy nhớ điều này: Chúng ta có thể sử dụng các chỉ thị cấu trúc để hiển thị các yếu tố và có toàn quyền kiểm soát điều đó chỉ trong một vài dòng mã:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Enjoy!