我有兩個維度的資料，一是購買本身，二是轉介參考。訂單由 PDO 生成并從 MySQL 資料庫中獲取：
<div rfrnc="joe" id="1" class="order"><div>1 Laptop $220</div><div class="time">10.25</div></div>
<div rfrnc="bill" id="2" class="order"><div>1 Phone $520</div><div class="time">10.10</div></div>
<div rfrnc="joe" id="3" class="order"><div>1 Headset $220</div><div class="time">9.20</div></div>
<div rfrnc="bill" id="4" class="order"><div>1 Laptop $220</div><div class="time">9.02</div></div>
<div rfrnc="joe" id="5" class="order"><div>1 Laptop $220</div><div class="time">11.02</div></div>
使用 ajax，上面的 html 將直接決議為我網站上的實時提要，按 orderid 或購買日期排序 desc，通過相同功能的 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 東西來修改已經從 ajax 呼叫回傳的 html 但沒有運氣。單擊任一訂單以更改其狀態時，還有進一步的 ajax 操作。對于具有相同參考的所有訂單，我需要在組級別上相同。對不起，如果我沒有很好地解釋它。
uj5u.com熱心網友回復：
此解決方案回圈現有條目并按data-rfrnc屬性對它們進行分組：
const people = {};
const html = `<div data-rfrnc="joe" id="1" class="order"><div>1 Laptop $220</div><div class="time">10.25</div></div>
<div data-rfrnc="bill" id="2" class="order"><div>1 Phone $520</div><div class="time">10.10</div></div>
<div data-rfrnc="joe" id="3" class="order"><div>1 Headset $220</div><div class="time">9.20</div></div>
<div data-rfrnc="bill" id="4" class="order"><div>1 Laptop $220</div><div class="time">9.02</div></div>
<div data-rfrnc="joe" id="5" class="order"><div>1 Laptop $220</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)
uj5u.com熱心網友回復：
我完全支持 @firstlast 在他的評論中發送 JSON 資料并在前端處理它會是更好的解決方案。
以防萬一有人感興趣，這里有另一種將接收到的 html 字串轉換回 JavaScript 陣列陣列的方法：
const html=`<div rfrnc="joe" id="1" ><div>1 Laptop $220</div><div >10.25</div></div>
<div rfrnc="bill" id="2" ><div>1 Phone $520</div><div >10.10</div></div>
<div rfrnc="joe" id="3" ><div>1 Headset $220</div><div >9.20</div></div>
<div rfrnc="bill" id="4" ><div>1 Laptop $220</div><div >9.02</div></div>
<div rfrnc="joe" id="5" ><div>1 Laptop $220</div><div >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);轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/399010.html
標籤：javascript php 查询 mysql 阿贾克斯