时间戳

首页 > 解决方案 > 在最后一个 UL 中动态填充 LI

jquery - 在最后一个 UL 中动态填充 LI

问题描述

我想创建这样的东西，但动态：

        <ul class="list-group list-group-flush">
            <li class="list-group-item list-group-item-light">
                <div class="row">
                    <label for="label1" class="col-sm-10 col-form-label col-form-label-sm">Label 1</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control form-control-sm" id="label1" placeholder="Label1" value="50">
                    </div>
                </div>
            </li>
            <li class="list-group-item list-group-item-light">
                <div class="row">
                    <label for="label2" class="col-sm-10 col-form-label col-form-label-sm">Label 2</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control form-control-sm" id="label1" placeholder="Label2" value="3">
                    </div>
                </div>
            </li>
            <li class="list-group-item list-group-item-light">
                <div class="row">
                    <label for="label3" class="col-sm-10 col-form-label col-form-label-sm">Label 3</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control form-control-sm" id="label1" placeholder="Label3" value="17">
                    </div>
                </div>
            </li>
        </ul>

项目的数量li取决于它从数据库中获取的行数。

我试过这样的事情：

rows.forEach(function(obj) {
  $('#custom-fields').append('<li class="list-group-item list-group-item-light"><div class="row"><label for="'+obj.id+'" class="col-sm-10 col-form-label col-form-label-sm">'+obj.label+'</label><div class="col-sm-2"><input type="text" class="form-control form-control-sm" id="'+obj.id+'" placeholder="'+obj.placeholder+'" value="50"></div></div></li>');
});

...但我不知道如何ul环绕它。问题也是页面上有很多uls，所以我不能简单地使用类似的东西$('#custom-fields ul').append('...

有小费吗？

标签： jquery

解决方案

您可以制作并附加到新的 ul，然后将其附加到页面。

var $newUL = $('<ul>');

rows.forEach(function(obj) {
  $newUL.append('<li class="list-group-item list-group-item-light"><div class="row"><label for="'+obj.id+'" class="col-sm-10 col-form-label col-form-label-sm">'+obj.label+'</label><div class="col-sm-2"><input type="text" class="form-control form-control-sm" id="'+obj.id+'" placeholder="'+obj.placeholder+'" value="50"></div></div></li>');
});

$('#custom-fields').append($newUL);

推荐阅读