1

以下の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が更新されますが、値がオーバーライドされ、その結果、1つのレコードのみを次のように表示できますli

たとえば、私はarray_list以下のようにしています：

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

データのあるli要素は1 つしか表示できませんが、product__name : three

だから私がやりたいことは

  1. 最初にli elementwithクラスを削除blue_discします（デフォルトでデータを表示しているため）
  2. 上記の詳細と同様に、li 要素を作成します。

ではどうすれば

  1. li elementクラスで を削除する
  2. ul上記のwith クラスの直後に要素を更新するにはどうすればよいsales_detailsですか?
4

2 に答える 2

3

まず、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);
    });
});

フィドルの例

于 2013-11-06T10:40:41.640 に答える
0

まず、HTML を変更する必要があります。複数liの が必要な場合は、それらの中に同じ を持つ要素を含めることはできません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);
    });
});
于 2013-11-06T10:45:53.190 に答える