Tôi đang học JavaScript và tôi muốn lặp lại mảng và hiển thị với HTML dưới dạng danh sách. Làm thế nào tôi có thể làm điều đó?
Mảng:
var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = ''
slides.forEach[function[slide] {
str += '- '+ slide + '
';
}];
str += '
';
document.getElementById["slideContainer"].innerHTML = str;
1javascript:
function listItem[item]{
for [var i = 0; i < item.array.length; i++]{
var list = item.array[i];
list = document.createElement['li'];
document.getElementByClass['box'].appendChild[list];
console.log[list];
}
}
Hỏi ngày 10 tháng 9 năm 2017 lúc 13:51Sep 10, 2017 at 13:51
Trong khi tất cả các câu trả lời được cung cấp đều hoạt động và đều ổn - tất cả chúng đều phải chịu cùng một vấn đề - trong đó họ nối phần tử vào DOM với mỗi lần lặp. Với một danh sách nhỏ, điều này sẽ không phải là một vấn đề, nhưng nếu bạn đang xử lý một số lượng lớn các yếu tố mà bạn muốn trong danh sách của mình - thao tác liên tục của HTE DOM sẽ có chi phí hiệu suất.
Nó tốt hơn nhiều [IMO] để xây dựng một chuỗi Li và sau đó khi mảng được lặp hoàn toàn thông qua - chuyển chuỗi đến UL bằng .innerhtml - trong DOM trong một hành động. Kết quả tương tự - nhưng nhanh hơn.
var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = ''
slides.forEach[function[slide] {
str += '- '+ slide + '
';
}];
str += '
';
document.getElementById["slideContainer"].innerHTML = str;
Đã trả lời ngày 10 tháng 9 năm 2017 lúc 14:42Sep 10, 2017 at 14:42
Gavgrifgavgrifgavgrif
Phù vàng 14,5K2 Huy hiệu vàng23 Huy hiệu đồng2 gold badges23 silver badges26 bronze badges
7
Khá đơn giản:
var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
array.forEach[function[item] {
var li = document.createElement["li"];
var text = document.createTextNode[item];
li.appendChild[text];
document.getElementById["myUl"].appendChild[li];
}];
Mã này làm như sau:
- Đối với mỗi mục của mảng:
- Tạo một
2 mớivar slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"] var str = '
- '
slides.forEach[function[slide] {
str += '
- '+ slide + ' '; }]; str += '
- Tạo một nút văn bản với văn bản từ mảng
- Nối văn bản vào
2var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"] var str = '
- '
slides.forEach[function[slide] {
str += '
- '+ slide + ' '; }]; str += '
- Nối các
2 vàovar slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"] var str = '
- '
slides.forEach[function[slide] {
str += '
- '+ slide + ' '; }]; str += '
5var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"] var str = '
- '
slides.forEach[function[slide] {
str += '
- '+ slide + ' '; }]; str += '
- Tạo một
Tất cả điều này trở nên đơn giản hơn nhiều nếu bạn sử dụng jQuery:
var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
array.forEach[function[item] {
$["#myUL"].append["" + item + " "];
}];
Chỉnh sửa: Nếu bạn muốn sử dụng một vòng lặp bình thường thay vì foreach, bạn có thể làm như vậy: If you want to use a normal for loop instead of forEach, you can do like so:
var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
for [i = 0; i < array.length; i++] {
var li = document.createElement["li"];
var text = document.createTextNode[array[i]];
li.appendChild[text];
document.getElementById["myUl"].appendChild[li];
}
Sự khác biệt duy nhất trong mã này là thay vì sử dụng phương thức Foreach tích hợp để lặp qua mảng và thực hiện các hoạt động trên mỗi phần tử, thay vào đó chúng tôi đã lặp qua các chỉ số của mảng.
Đã trả lời ngày 10 tháng 9 năm 2017 lúc 13:55Sep 10, 2017 at 13:55
2
Bạn có thể sử dụng phương pháp ES6 giảm và mẫu chữ. Bạn có thể sử dụng chúng như thế này:
0
1Để biết thêm thông tin về giảm, hãy xem tại đây: //developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/reduce. Và nếu bạn muốn biết thêm về các mẫu chữ kiểm tra tại đây: //developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals
Đã trả lời ngày 10 tháng 9 năm 2017 lúc 13:55Sep 10, 2017 at 13:55
Bạn có thể sử dụng phương pháp ES6 giảm và mẫu chữ. Bạn có thể sử dụng chúng như thế này:Thijs
Để biết thêm thông tin về giảm, hãy xem tại đây: //developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/reduce. Và nếu bạn muốn biết thêm về các mẫu chữ kiểm tra tại đây: //developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals2 gold badges13 silver badges22 bronze badges
2
Thijsthijs
2
32.3212 Huy hiệu vàng13 Huy hiệu bạc22 Huy hiệu đồngSep 10, 2017 at 13:56
Chuyển đổi mảng thành một chuỗi bằng cách sử dụng mảng#tham gia và sử dụng các thẻ mục danh sách làm dấu phân cách. Thêm thẻ bắt đầu và kết thúc bằng thủ công bằng cách sử dụng chuỗi nối [
var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = ''
slides.forEach[function[slide] {
str += '- '+ slide + '
';
}];
str += '
';
document.getElementById["slideContainer"].innerHTML = str;
6]. Gán chuỗi vào phần tử danh sách [var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = ''
slides.forEach[function[slide] {
str += '- '+ slide + '
';
}];
str += '
';
document.getElementById["slideContainer"].innerHTML = str;
7] bằng phần tử#InternalHTML:Ori DroriĐã trả lời ngày 10 tháng 9 năm 2017 lúc 13:5629 gold badges203 silver badges195 bronze badges
Ori droriori drori
4
5
6173K29 Huy hiệu vàng203 Huy hiệu bạc195 Huy hiệu ĐồngJul 6, 2018 at 23:29
sg28sg28sg28
Hãy thử điều này, bạn cũng có thể thêm vào danh sách9 silver badges19 bronze badges
Đã trả lời ngày 6 tháng 7 năm 2018 lúc 23:29
7
1.3539 huy hiệu bạc19 huy hiệu đồngApr 9 at 18:42
Vì vậy, hộp lớp của bạn đã thiếu. bên trong dấu ngoặc đơn. Nên trông giống như thế này hơn
9Đã trả lời ngày 9 tháng 4 lúc 18:42
var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = ''
slides.forEach[function[slide] {
str += '- '+ slide + '
';
}];
str += '
';
document.getElementById["slideContainer"].innerHTML = str;
0Bạn cũng có thể thực hiện một ánh xạ cho các mục danh sách.Apr 25 at 8:40