jQuery 重新排序和构建 Ajax 数据

Question

我有两个维度的数据，一是购买本身，二是推荐参考。订单由 PDO 生成并取自 MySQL 数据库：

<div rfrnc="joe" id="1" class="order"><div>1 Laptop 0</div><div class="time">10.25</div></div>
<div rfrnc="bill" id="2" class="order"><div>1 Phone 0</div><div class="time">10.10</div></div>
<div rfrnc="joe" id="3" class="order"><div>1 Headset 0</div><div class="time">9.20</div></div>
<div rfrnc="bill" id="4" class="order"><div>1 Laptop 0</div><div class="time">9.02</div></div>
<div rfrnc="joe" id="5" class="order"><div>1 Laptop 0</div><div class="time">11.02</div></div>

使用 ajax 上面的 html 将被直接解析为我网站上的实时提要，通过 3 种类型的 api 调用相同的功能（根据参数来识别每个操作）：

初始加载（5 个条目）和加载更多按钮（每次 +5）
```
$(".wrapper").append(html);  
```
websocket ping 仅触发相同的 api 调用并从 mysql 检索（仅返回一个订单 - 实时馈送）
```
$(".wrapper").prepend(html); 
```
当订单已经在实时订阅源上但状态发生变化时，websocket 更新
```
$("#" + orderid).replaceWith(html);
```

我遇到的问题是如何将 html div 转换为显示并根据参考对其进行分组，如下所示。

<div rfrnc="joe">
<div id="5" class="order">...</div>
<div id="3" class="order">...</div>
<div id="1" class="order">...</div>
</div>
<div rfrnc="bill">
<div id="4" class="order">...</div>
<div id="2" class="order">...</div>
</div>

我尝试了各种方法，比如重写源 php html、重写 sql 查询以使用 group_concat 以及使用 wrapAll 和类似 jquery 东西来修改 html 已经从 ajax 调用返回但没有运气。单击任一订单以更改其状态时，还有 ajax 操作。对于具有相同参考的所有订单，我需要在组级别上相同。不好意思解释的不好

Answer 1

此 solution 循环现有条目并按 data-rfrnc 属性:

对它们进行分组

const people = {};

const html = `<div data-rfrnc="joe" id="1" class="order"><div>1 Laptop 0</div><div class="time">10.25</div></div>
<div data-rfrnc="bill" id="2" class="order"><div>1 Phone 0</div><div class="time">10.10</div></div>
<div data-rfrnc="joe" id="3" class="order"><div>1 Headset 0</div><div class="time">9.20</div></div>
<div data-rfrnc="bill" id="4" class="order"><div>1 Laptop 0</div><div class="time">9.02</div></div>
<div data-rfrnc="joe" id="5" class="order"><div>1 Laptop 0</div><div class="time">11.02</div></div>
`
const domParser = new DOMParser();
const doc = domParser.parseFromString(html, "text/html")


Array.from(doc.querySelectorAll('body > div')).forEach(div => {
  const person = div.getAttribute('data-rfrnc');
  if (!people[person]) {
     people[person] = [];
  }
  people[person].push(div)
})


const docFrag = document.createDocumentFragment();
for(let [person, elements] of Object.entries(people)) {
  const personElement = document.createElement('div');
  personElement.setAttribute('data-rfrnc', person);
  elements
    .sort((a,b) => a.getAttribute('id') < b.getAttribute('id'))
    .forEach(element => personElement.appendChild(element));
  docFrag.appendChild(personElement);
}

document.body.appendChild(docFrag)

Answer 2

我完全支持@firstlast 的评论，即发送 JSON 数据并在前端处理将是更好的解决方案。

以防万一有人感兴趣，这是将接收到的 html 字符串转换回 JavaScript 数组的另一种方法：

const html=`<div rfrnc="joe" id="1" class="order"><div>1 Laptop 0</div><div class="time">10.25</div></div>
<div rfrnc="bill" id="2" class="order"><div>1 Phone 0</div><div class="time">10.10</div></div>
<div rfrnc="joe" id="3" class="order"><div>1 Headset 0</div><div class="time">9.20</div></div>
<div rfrnc="bill" id="4" class="order"><div>1 Laptop 0</div><div class="time">9.02</div></div>
<div rfrnc="joe" id="5" class="order"><div>1 Laptop 0</div><div class="time">11.02</div></div>`;

const dom=document.createElement("div");
dom.innerHTML=html
  
const data=[...dom.children].map(d=>[d.id,d.getAttribute("rfrnc")].concat([...d.children].flatMap(c=>c.textContent.split(" ")))
);

// show the result:
console.log(["id","rfrnc","qty","descr","price","time"]);
console.log(data);

jQuery 重新排序和构建 Ajax 数据

jQuery reorder and structure Ajax data

javascript

php

mysql

ajax

jquery