jQuery将<li>添加到<ul>包含每个<li>

时间:2017-09-13 12:03:04

标签: javascript jquery html

所以我正在创建一个简单的CRUD Web应用程序。

我希望能够输入搜索字符串并将搜索字符串与可能的匹配项匹配。在这种情况下,我按Product.Name搜索。

我有以下JS代码:

function findByName() {
    var id = $('#prodName').val();
    var url = "api/product/GetProductsByName/" + id
    //$.getJSON(uri + '/' + name)

    $.getJSON(url)
        .done(function (data) {
            $.each(data, function (key, item) {
                $('<li>', { text: formatItem(item) }).appendTo($('#searchedProducts'));
            });
        })
      .fail(function (jqXHR, textStatus, err) {
          $('#product').text('Error: ' + err);
      });
}
function formatItem(item) {
    return item.Name + ' | ' + 
    item.Category + ': $' + 
    item.Price;
}

适用于添加我搜索的产品系列。

但是我也希望实现&#34;更新&#34;功能是通过在行中的每个项目旁边添加一个按钮来阅读&#34;编辑&#34;

我知道我可以使用jQuery动态生成li项目,但是如何为每个li项目添加按钮?并且还为每个按钮提供了参考文献中的相应项目?

编辑:

我希望列表看起来像这样:

item1 (button)
item2 (button)
item3 (button)
item4 (button)

0 个答案:

没有答案