如何将李附加到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>

我尝试过一些我不会工作的事情。小提琴 link

Answer 1

您可以使用append方法，该方法也可以接受DOMElements / jQuery对象数组：

＆＃13;

＆＃13;

var x = [1, 2, 3, 4, 5];

$("div ul").append(x.map(function (el) {
    return $('<li>').text(el);
}));

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议：

＆＃13;

＆＃13;

var x = [1, 2, 3, 4, 5];

x.forEach(function(num){
  $('ul').append('<li>' + num + '</li>');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，或许：

＆＃13;

＆＃13;

var x = [1, 2, 3, 4, 5];

$('ul').html(function() {
  return '<li>' + x.join('</li><li>') + '</li>';
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考文献：

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

DEMO

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

Fiddle

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

Fiddle