Question

我的应用程序中有一个过滤功能。用户可以根据工资或评级选择他想要如何重新排序用户。我用json得到了正确的数据，但我不知道如何重新排序元素。

假设我有

列表

<div class="col-md-12 profile_thumbnail_box" data-id="1"></div>

和

<div class="col-md-12 profile_thumbnail_box" data-id="4"></div>

其中data-id是user_id。现在有两个用户。

现在，当用户更改订单时（让我们说工资最便宜），我得到了这个json：

[  
    {  
        "user_id":4,
        "wage":"4",
        "lat":59.46,
        "lng":24.83,
        "recommended":"2",
        "rating":"1,5",
        "distance":5.2153552636895
    },
    {  
        "user_id":1,
        "wage":"6",
        "lat":59.44,
        "lng":24.74,
        "recommended":"1",
        "rating":"4,5",
        "distance":0.92971285651468
    }
]

现在第一个user_id是4.我如何重新排序data-id=4将成为第一个的div，或者如果有更多的用户和数据返回，那么我如何根据返回的位置定位它们user_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);

      }
    });
  });

Answer 1

为了实现这一点，您可以实现自己的sort()逻辑，该逻辑根据您从中检索的数组中与.profile_thumbnail_box匹配的对象的位置重新排序data_id元素。 AJAX请求，如下所示：

＆＃13;

// in your AJAX success handler...
var data = [{
  "user_id": 4,
  "wage": "4",
  "lat": 59.46,
  "lng": 24.83,
  "recommended": "2",
  "rating": "1,5",
  "distance": 5.2153552636895
}, {
  "user_id": 1,
  "wage": "6",
  "lat": 59.44,
  "lng": 24.74,
  "recommended": "1",
  "rating": "4,5",
  "distance": 0.92971285651468
}, {
  "user_id": 3
  // ...
}, {
  "user_id": 2
  // ...
}]
var ids = data.map(function(e) { return e.user_id; });

$('.profile_thumbnail_box').sort(function(a, b) {
  var aId = $(a).data('id'),
    bId = $(b).data('id');
  return (ids.indexOf(aId) || 0) > (ids.indexOf(bId) || 0);
}).appendTo('#container');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="col-md-12 profile_thumbnail_box" data-id="1">user #1</div>
  <div class="col-md-12 profile_thumbnail_box" data-id="2">user #2</div>
  <div class="col-md-12 profile_thumbnail_box" data-id="3">user #3</div>
  <div class="col-md-12 profile_thumbnail_box" data-id="4">user #4</div>
</div>

＆＃13;

Answer 2

您可以遍历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中出现一次，所以它将从原始位置取出并放回到附加元素的底部。当您以这种方式处理所有元素时，它们将按所需顺序显示。

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

2 个答案: