jquery - 如何使用jquery在ul标签内删除和添加li元素

Question

我有下面的html代码

<ul class="sales_details clearfix">
    <li class="blue_disc">
        <a id="product_detail" href="">Som stuff</a> 
        <span id="product_revenue">$45</span> 
   </li>
</ul>
<input  class="update" type="button">

我的jquery代码是

$(document).ready(function () {
    $('.update').click(function() {
        var array_list = response_list; // I will get response_list from somewhere as list of dictionaries
        $.each(array_list, function (i, item) {
            href = "/products/" + item.products__id + "/"
            $('#product_detail').attr('href', href).html(item.products__name);
            $('#product_revenue').html(item.revenue);
        });
    });
});

因此，当从我上面的 html 和 jquery 代码中，li elementwith 类blue_disc正在更新，但值被覆盖，因此我只能看到一条记录li

例如我有array_list如下：

[{'products__name':'One', 'revenue':'45'},
{'products__name':'two', 'revenue':'32'},
{'products__name':'three', 'revenue':'35'}]

我只能看到一个带有数据的li元素，product__name : three

所以我想做的是

1. 首先删除li elementwith 类blue_disc（因为默认情况下我正在显示一些数据）
2. 像上面的细节一样创建一个 li 元素，

那么如何

1. 删除li element一个类
2. 如何在上面的ulwith 类之后更新元素sales_details？

Answer 1

首先，您的click语法错误。其次，您正在更新现有元素的属性，而不是在循环中创建任何新元素。尝试这个：

$('.update').click(function () {
    $('.sales_details').empty();

    var array_list = response_list;
    $.each(array_list, function (i, item) {
        var $li = $('<li />').appendTo('.sales_details');

        $('<a />', {
            'href': "/products/" + item.products__id + "/",
            'text': item.products__name
        }).appendTo($li);

        $('<span />', {
            'text': '$' + item.revenue
        }).appendTo($li);
    });
});

示例小提琴

Answer 2

首先，您的 HTML 需要更改。如果你想有多个lis，那么你不能在它们里面有相同的元素id。这会导致无效的 DOM 和各种令人头疼的问题。

要回答您的问题：

要删除具有特定类的所有元素，请执行$('li.blue_disc').remove().

要创建新元素并将它们附加到ul，请执行以下操作...

$('.update').click(function() {
    // remove the current li.blue_disc elements
    $('li.blue_disc').remove();

    $.each(array_list, function (i, item) {
        // create the li
        var li = $('<li class="blue_disc"/>'); 

        // add the link
        li.append('<a class="product_detail" href="' + 
                  item.products__id +
                  '">Som stuff</a>'
        );

        // add the span
        li.append('<span class="product_revenue">$' +
                  item.revenue +
                  '</span>'
        );

        // add the li to the ul
        $('.sales_details').append(li);
    });
});