Hướng dẫn how do you iterate through a list in html? - làm thế nào để bạn lặp qua một danh sách trong html?

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 = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

javascript:

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);
  }  
 }

<div class ="box"><ul></ul></div>

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 = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

<div id="slideContainer"></div>

Đã trả lời ngày 10 tháng 9 năm 2017 lúc 14:42Sep 10, 2017 at 14:42

Gavgrifgavgrifgavgrif

14.4K2 Huy hiệu vàng22 Huy hiệu bạc26 Huy hiệu đồng2 gold badges22 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);
});

<ul id="myUl"></ul>

Mã này làm như sau:

• Đối với mỗi mục của mảng:
  1. Tạo một

     var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
     var str = '<ul>'
     
     slides.forEach(function(slide) {
       str += '<li>'+ slide + '</li>';
     }); 
     
     str += '</ul>';
     document.getElementById("slideContainer").innerHTML = str;

     2 mới
  2. Tạo một nút văn bản với văn bản từ mảng
  3. Nối văn bản vào

     var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
     var str = '<ul>'
     
     slides.forEach(function(slide) {
       str += '<li>'+ slide + '</li>';
     }); 
     
     str += '</ul>';
     document.getElementById("slideContainer").innerHTML = str;

     2
  4. Nối các

     var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
     var str = '<ul>'
     
     slides.forEach(function(slide) {
       str += '<li>'+ slide + '</li>';
     }); 
     
     str += '</ul>';
     document.getElementById("slideContainer").innerHTML = str;

     2 vào

     var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
     var str = '<ul>'
     
     slides.forEach(function(slide) {
       str += '<li>'+ slide + '</li>';
     }); 
     
     str += '</ul>';
     document.getElementById("slideContainer").innerHTML = str;

     5

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("<li>" + item + "</li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>

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);
}

<ul id="myUl"></ul>

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:

<div class ="box"><ul></ul></div>

<div class ="box"><ul></ul></div>

Để biết thêm thông tin về giảm, hãy xem tại đây: https://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: https://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: https://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: https://developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals2 gold badges13 silver badges21 bronze badges

2

Thijsthijs

<div class ="box"><ul></ul></div>

<div class ="box"><ul></ul></div>

2.3212 Huy hiệu vàng13 Huy hiệu bạc21 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 = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

Đã trả lời ngày 10 tháng 9 năm 2017 lúc 13:5629 gold badges201 silver badges192 bronze badges

Ori droriori drori

<div class ="box"><ul></ul></div>

<div class ="box"><ul></ul></div>

<div class ="box"><ul></ul></div>

172K29 Huy hiệu vàng201 Huy hiệu bạc192 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

<div class ="box"><ul></ul></div>

<div class ="box"><ul></ul></div>

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

<div class ="box"><ul></ul></div>

Đã 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 = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

Bạ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

Làm thế nào để tôi lặp lại trong HTML?

Làm thế nào để bạn lặp lại thông qua một danh sách?

Làm thế nào để bạn lặp lại thông qua từng yếu tố?

Làm thế nào để tôi lặp lại thông qua một danh sách trong JavaScript?