Question

首先：

我在MYSQL中创建了一个论坛结构：

表：[boards] - ＆gt; id，parent_board，title，description

简单而好。

这是数据库响应：

[{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"},
{"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"},
{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]

正如您所见主板ID 3 是主板ID 1 的子主板，因为其parent_board值设置为 1

我希望收到以下输出：

Lorem 1
- Lorem 1-1
Lorem 2

但这是我的结果：

Lorem 1
Lorem 2
- Lorem 1-1

如何循环此对象以使子板（板3）位于板1下方？

我使用<ul>和<li>代码。

这是我的代码：

var html = "</ul>";

for(var i = 0; i < boards.length; i++){

    if(boards[i].parent_board == 0){

        html += "<li>" + boards[i].title + "</li>";

    }else{

        html += "<ul>";

        html += "<li>" + boards[i].title + "</li>";

        html += "</ul>";
    }

}

Answer 1

我会为每个主板的<li>添加一个ID属性。然后，每当我遍历子板时，我只是将新项作为具有匹配id的父项的子项追加，为此，您必须创建并在遇到它们时将每个元素添加到文档中而不是存储它们首先是字符串。

var htmlElem = document.getElementById('htmlElemId');
htmlElem.innerHTML = "";

for(var i = 0; i < boards.length; i++){
  if(boards[i].parent_board == 0){
    htmlElem.innerHTML += "<li id='" + boards[i].id + "'>" + boards[i].title + "</li>";
  }else{
    var parent = document.getElementById(boards[i].parent_board);
    if (parent){
      parent.innerHTML += "<ul><li id='" + boards[i].id + "'>" + boards[i].title + "</li></ul>";
    }
  }
}

替换＆＃39; htmlElemId＆＃39;使用容器元素的实际ID，并确保它的类型为<ul>。

编辑：您可能还想考虑在您的ID中使用某种前缀，因此您不仅仅使用可能与其他地方的内容冲突的普通数字

"<li id='SomePrefix-" + boards[i].id + "'>" + boards[i].title + "</li>"

var parent = document.getElementById("SomePrefix-" + boards[i].parent_board);

EDIT2：这是JSFiddle

循环对象和订单子值

1 个答案: