Question

因此，我想从数据库中获取一些数据，这些数据要显示在多级下拉菜单中。想法是可以通过产品类别访问产品，如下所示：总体菜单->制造商菜单->制造商->产品

为此，我使用了几个循环来迭代包含数据的JSON解析多维多维JS对象。循环起作用，数据也按所需顺序插入（例如，插入制造商A后，插入与制造商A相关的所有产品，然后插入制造商B，依此类推）。

但是，似乎append（）给我带来了一些麻烦。到目前为止，这是循环结构：

function setAllProductsWithCategorisation(id, allProductsByCategorisation){
    console.log("inside setAllProductsWithCategorisation",allProductsByCategorisation)
    Object.keys(allProductsByCategorisation).forEach((category) => {
      //console.log(category)

      $('#' + id).append("<li><a href='#'>" + category + "</a><ul class='vertical menu nested'><select>")

      allProductsByCategorisation[category].forEach((product) => {
        //console.log(product)
        $('#' + id).append("<option value=" + product + ">" + product + "</option>")
      })


      $('#' + id).append("</select></ul></li>")

  })
}

现在，在过程完成之后，所有选项都位于其各自的选择元素之外。当使用Chrome Devtools检查DOM时，我发现select元素在串联中打开后立即关闭。看来jquery append（）是“猜测”，我只是忘了关闭它，因此自动插入了一个右括号Oo 我的ul元素也一样（请参见屏幕截图：https://imgur.com/ZvxgAJX）

如何防止这种情况？我基本上只是想通过嵌套循环遍历各个数据的循环来手动构建此标记，然后逐段添加代码。到目前为止，Append（）还是很棒的，但是这种行为还很不稳定...

Answer 1

append将在最后一个内容之后连续追加元素。除了附加，您还可以将其串联为变量，然后附加。

 var appendHtm = '';
 appendHtm += "<li><a href='#'>" + category + "</a><ul class='vertical menu nested'><select>";

  allProductsByCategorisation[category].forEach((product) => {
    //console.log(product)
    appendHtm += "<option value=" + product + ">" + product + "</option>";
  })


  appendHtm += "</select></ul></li>";

  $('#' + id).append(appendHtm);

当连接“未完成”标记时，append（）显示意外行为

1 个答案: