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

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。如何对div 重新排序，其中data-id=4将是第一个，或者如果返回更多用户和数据，那么如何根据返回的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()逻辑，该逻辑根据与从 AJAX 请求检索的数组中的data_id匹配的对象的位置对.profile_thumbnail_box元素进行重新排序，如下所示：

// 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');

<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>

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