Javascript 如何根据json值重新排序div？

我的应用程序中有一个过滤功能。用户可以选择如何根据工资或评级对用户重新排序。我用json获得了正确的数据，但我被困在如何重新排列元素的顺序上

假设我有一个清单

及

现在第一个用户id是4。如果数据id=4是第一个，我如何对div进行重新排序，或者如果有更多的用户和返回的数据，那么我如何根据返回的用户id值对它们进行定位

编辑：

下面是用于更改过滤器的jquery

  //when user changes the filters
  $('.order_listing').on('change', function() {
    // $(".loading-icon").show();
    var users = [];
    $(".profile_thumbnail_box").each(function() {
      var data_ids = $(this).attr("data-id");
      users.push(data_ids);
    });
    console.log(users);
    //data to send
    var filterData = {
      order_type: $(".order_listing").val(),
      lat: localStorage.getItem("latitude"),
      lng: localStorage.getItem("longitude"),
      user_ids : users
    }

    $.ajax({
      type: "POST",
      url: "/search/filters",
      data: filterData,
      dataType: "JSON",
      success: function(data) {
        console.log(data);

        $(".loading-icon").hide();
      },
      error: function(jqXhr, textStatus, errorThrown, data) {
        console.log(jqXhr, textStatus, errorThrown, data);

      }
    });
  });

---

为了实现这一点，您可以实现自己的排序逻辑，根据从AJAX请求检索的数组中与其数据id匹配的对象的位置，对.profile\u缩略图\u框元素重新排序，如下所示：

//在AJAX成功处理程序中。。。 风险值数据=[{ 用户id:4， 工资：4， 拉脱维亚：59.46， 液化天然气：24.83， 建议：2， 评级：1,5， 距离：5.215352636895 }, { 用户id:1， 工资:6,， 拉脱维亚：59.44， 液化天然气：24.74， 建议:1,， 评级：4,5， 距离：0.92971285651468 }, { 用户识别码：3 // ... }, { 用户识别码：2 // ... }] var id=data.mapfunctione{return e.user_id；}； $'.profile_缩略图_box'.SortFunction A，b{ var-aId=$a.data'id'， 出价=$b.数据'id'； 返回id.indexOfaId | | 0>ids.indexOfbId | | 0； }.附于“容器”之后； 用户1 用户2 用户3 用户4

---

您可以循环JSON对象中的项目，找到相应的DOM元素并将其附加到其容器中

function reorder(users) {
    users.forEach(function(user) {
        var element = document.querySelector(`[data-id="${user['user_id']}"]`);
        if (element === null) {
            return;
        }
        element.parentElement.appendChild(element);
    });
}   

然后使用从服务器检索到的新JSON调用reorder方法

---

因为一个元素在DOM中只能出现一次，所以它将从其原始位置取出，并放回它所附加到的元素的底部。当您以这种方式处理所有元素时，它们将按所需顺序显示。

取决于您如何创建元素，是在创建时排序，还是在创建后排序，还是两者都排序？您尝试了什么？向我们展示创建elements@PatrickEvans元素是在加载时创建的，并首先根据距离进行排序。我想在用户选择下拉列表后对元素重新排序。选中更改功能的编辑。您可以使用ajax重新加载父div的内容。您不可能只有两条记录。@PatrickEvans初始元素在后端创建，内容以JSON的形式返回。如果用户多于两个怎么办？此代码适用于任意数量的用户。重要的一点是，HTML中的数据id与返回的数组中某个对象的用户id相匹配。我更新了答案以显示它以任意顺序与更多用户一起工作。天哪，你就是图例。我为此奋斗了几个小时。谢谢你，伙计。

  //when user changes the filters
  $('.order_listing').on('change', function() {
    // $(".loading-icon").show();
    var users = [];
    $(".profile_thumbnail_box").each(function() {
      var data_ids = $(this).attr("data-id");
      users.push(data_ids);
    });
    console.log(users);
    //data to send
    var filterData = {
      order_type: $(".order_listing").val(),
      lat: localStorage.getItem("latitude"),
      lng: localStorage.getItem("longitude"),
      user_ids : users
    }

    $.ajax({
      type: "POST",
      url: "/search/filters",
      data: filterData,
      dataType: "JSON",
      success: function(data) {
        console.log(data);

        $(".loading-icon").hide();
      },
      error: function(jqXhr, textStatus, errorThrown, data) {
        console.log(jqXhr, textStatus, errorThrown, data);

      }
    });
  });

function reorder(users) {
    users.forEach(function(user) {
        var element = document.querySelector(`[data-id="${user['user_id']}"]`);
        if (element === null) {
            return;
        }
        element.parentElement.appendChild(element);
    });
}