如何使用 javascript each() 对数据进行排序

Question

我有来自数据库的数据的 html 代码。我需要通过 AJAX 更新此数据，以便用户无需刷新页面即可获得新的货币汇率。这是 Laravel 刀片模板：

@foreach ($currencies as $currency)
    <div class="currency-{{ $currency->id }}">
        <div class="cur-id">{{ $currency->id }}</div>
        <div class="cur-name">{{ $currency->cur_name }}</div>
        <div class="cur-sell">{{ $currency->cur_sell + 0 }}</div>
        <div class="cur-buy">{{ $currency->cur_buy + 0 }}</div>
    </div>
@endforeach

页面加载后 - 它有实际数据，但 1 分钟后刷新此数据，所以我每分钟触发一次 AJAX 请求：

$.ajax({
    type: 'GET',
    url: '/ajax-currencies',
    dataType: 'json',
    success: function (data) {
        $.each(data, function(index, element) {
            $('.currency-+element.id+.cur-sell').text(element.cur_sell);
        });
    }
});

"/ajax-currencies" 响应带有 json 对象。如何将每个对象及其值放入正确的 div -currency-1（具有自己的值）、currency-2（具有自己的值）等，所以它看起来像这样：

<div class="currency-1">
  <div class="cur-id">1</div>
  <div class="cur-name">Bitcoin</div>
</div>

<div class="currency-2">
  <div class="cur-id">2</div>
  <div class="cur-name">Ethereum</div>
</div>

Answer 1

我不知道你为什么需要任何排序。如果你的 div 有特殊的类，那么你可以通过这些类找到 div 并直接在这些 div 中插入数据。您已经在尝试这样做，但不正确。您的each 回调应该是：

function(index, element) {
    $('.currency-' + element.id + ' .cur-sell').text(element.cur_sell);
    // alternative version     
    //$('.currency-' + element.id).find('.cur-sell').text(element.cur_sell);
}

看，我把 element.id 移出了带引号的字符串，因为 javascript 无法解析带引号的字符串中的变量。

我还在选择器的类之间添加了一个 空格，因为像 .class1.class2 这样的选择器会尝试查找应用了 both 类的项目，这是您不想要的。

另外，我使用find() 方法添加了替代选择器。举个例子。

现在选择器应该选择正确的 div。