Hiển thị tất cả các mục trong mảng bằng cách sử dụng jquery

Question

Tôi có một mảng mà tôi muốn hiển thị trong html .. Tôi không muốn viết nhiều dòng để đăng mỗi mục trong mảng nhưng tất cả phải giống hệt nhau. tức là

var array = []; 
//code that fills the array.. 
$('.element').html('<span>'+array+'</span>'); 

những gì tôi muốn ở đây là tạo khoảng cho mỗi mục trong mảng.

Answer 1

Bạn có thể làm điều đó như thế này bằng cách duyệt qua các mảng trong vòng một, tích lũy HTML mới vào mảng riêng của nó và sau đó gia nhập HTML tất cả cùng nhau và chèn nó vào DOM ở cuối:

var array = [...]; 
var newHTML = []; 
for (var i = 0; i < array.length; i++) { 
    newHTML.push('<span>' + array[i] + '</span>'); 
} 
$(".element").html(newHTML.join("")); 

một số người thích sử dụng phương pháp .each() jQuery thay vì for vòng lặp mà sẽ làm việc như thế này:

var array = [...]; 
var newHTML = []; 
$.each(array, function(index, value) { 
    newHTML.push('<span>' + value + '</span>'); 
}); 
$(".element").html(newHTML.join("")); 

Hoặc vì đầu ra của lặp mảng chính nó là một mảng với một mục bắt nguồn từ mỗi mục trong origi mảng NAL, jQuery .map thể được sử dụng như thế này:

var array = [...]; 
var newHTML = $.map(array, function(value) { 
    return('<span>' + value + '</span>'); 
}); 
$(".element").html(newHTML.join("")); 

Bạn nên sử dụng là một sự lựa chọn cá nhân phụ thuộc vào phong cách mã hóa ưa thích của bạn, nhạy cảm với hiệu suất và sự quen thuộc với .map(). Tôi đoán là vòng lặp for sẽ là nhanh nhất vì nó có ít cuộc gọi chức năng hơn, nhưng nếu hiệu suất là tiêu chí chính, thì bạn sẽ phải đánh giá các tùy chọn để thực sự đo lường.

FYI, trong cả ba tùy chọn này, HTML được tích lũy thành một mảng, sau đó kết hợp với nhau ở cuối và chèn vào DOM tất cả cùng một lúc. Điều này là do các hoạt động DOM thường là phần chậm nhất của một hoạt động như thế này, vì vậy tốt nhất là giảm thiểu số lượng các hoạt động DOM riêng biệt. Các kết quả được tích lũy thành một mảng vì việc thêm các mục vào một mảng và sau đó nối chúng vào cuối thường nhanh hơn việc thêm các chuỗi khi bạn đi.

---

Và, nếu bạn có thể sống với IE9 trở lên (hoặc cài đặt một polyfill ES5 cho .map()), bạn có thể sử dụng phiên bản mảng của .map như thế này:

var array = [...]; 
$(".element").html(array.map(function(value) { 
    return('<span>' + value + '</span>'); 
}).join("")); 

Lưu ý: phiên bản này cũng loại bỏ biến số trung gian newHTML vì lợi ích của độ chặt.

Answer 2

for (var i = 0; i < array.length; i++) { 
    $(".element").append('<span>' + array[i] + '</span>'); 
} 

Answer 3

Sử dụng bất kỳ ví dụ mà không chèn mỗi phần tử cùng một lúc, người ta chèn là hiệu quả nhất

$('.element').html('<span>' + array.join('</span><span>')+'</span>'); 

Answer 4

Bạn nên sử dụng $.map cho việc này:

var array = ["one", "two", "three"]; 

var el = $.map(array, function(val, i) { 
    return "<span>" + val + "</span>"; 
}); 

$(".element").html(el.join("")); 

jsFiddle demo

Answer 5

Nhanh chóng và dễ dàng.

$.each(array, function(index, value){ 
    $('.element').html($('.element').html() + '<span>' + value +'</span>') 
}); 

Answer 6

đây là giải pháp, tôi tạo ra một trường văn bản để động thêm các mục mới trong mảng mã html của tôi là

<input type="text" id="name"> 
 
\t <input type="button" id="btn" value="Button"> 
 
\t \t <div id="names"> 
 
\t \t </div>

nay gõ bất cứ điều gì trong lĩnh vực văn bản và nhấp chuột trên nút này sẽ thêm mục vào mảng và chức năng gọi dispaly_arry

$(document).ready(function() 
 
{ \t \t 
 
\t function display_array() 
 
\t { 
 
\t \t $("#names").text(''); 
 
\t \t $.each(names,function(index,value) 
 
\t \t { 
 
\t \t $('#names').append(value + '<br/>'); 
 
\t \t }); 
 
\t } 
 
\t 
 
\t var names = ['Alex','Billi','Dale']; 
 
\t display_array(); 
 
\t $('#btn').click(function() 
 
\t { 
 
\t \t var name = $('#name').val(); 
 
\t \t names.push(name);// appending value to arry 
 
\t \t display_array(); 
 
\t \t 
 
\t }); 
 
\t 
 
}); 
 
\t

hiển thị phần tử mảng thành div, bạn có thể sử dụng span nhưng cho giải pháp này sử dụng cùng id.!