如何將li附加到ul

Question

我有數組值。 我需要在li中插入數組值，之后將其附加到ul中。

的HTML

<div>
    <ul></ul>
    <ul></ul>
 </div>

數組值x = [1、2、3、4、5];

需要輸出

<div>
    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
 </div>

我嘗試了一些我不會工作的東西。 小提琴鏈接

Answer 1

您可以使用append方法，該方法也可以接受DOMElements / jQuery Objects數組：

 var x = [1, 2, 3, 4, 5]; $("div ul").append(x.map(function (el) { return $('<li>').text(el); })); 

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

Answer 2

我建議：

 var x = [1, 2, 3, 4, 5]; x.forEach(function(num){ $('ul').append('<li>' + num + '</li>'); }); 

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

也許：

 var x = [1, 2, 3, 4, 5]; $('ul').html(function() { return '<li>' + x.join('</li><li>') + '</li>'; }); 

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

參考文獻：

• JavaScript：
  • Array.prototype.forEach() 。
  • Array.prototype.join() 。
• jQuery的：
  • append() 。
  • html() 。

Answer 3

嘗試

$("div").children().each(function () {
    $(this).append(function () {
        return $.map([1, 2, 3, 4, 5], function (i, val) {
            return "<li>" + i + "</li>";
        });
    });
});

演示

Answer 4

遍歷每個元素並像這樣追加

var x = [1, 2, 3, 4, 5];
$("div ul").each(function() {
    var ul = this;
    $.each(x, function(i, val) {
        $(ul).append("<li>" + val + "</li>");
    });
});

小提琴

Answer 5

var x = [1, 2, 3, 4, 5];
$("div ul").each(function () {
    for(var i=0; i < x.length; i++) {
        $(this).append("<li>" + x[i] + "</li>");
    }
});

Answer 6

另一個例子：

var x=[1, 2, 3, 4, 5];
$("div ul").each(function () {
    var $ul = $(this);
    $.each(x, function() {
        $ul.append($("<li/>").text(this));
    });
});

小提琴