时间戳

首页 > 解决方案 > append() 在连接“未完成”标记时显示意外行为

jquery - append() 在连接“未完成”标记时显示意外行为

问题描述

所以我有一些来自数据库的数据，我想在多级下拉菜单中显示。这个想法是可以通过它们的类别访问产品，如下所示：Overallmenu -> Manufacturermenu -> Manufacturer -> Products

为此，我使用了几个循环来遍历包含数据的 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 时，我发现选择元素在我的串联中打开后立即关闭。似乎 jquery append() 是“猜测”我只是忘了关闭它，因此自动插入一个右括号 Oo 我的 ul 元素也一样（见截图：https ://imgur.com/ZvxgAJX ）

我怎样才能防止这种情况？我基本上只是想通过嵌套循环遍历各个数据来手动构建这个标记，然后逐个添加代码。到目前为止，Append() 非常棒，但这种行为非常可疑......

标签： jqueryhtml

解决方案

追加将在最后一个内容之后连续追加元素，所以。而不是追加，您可以将它连接到一个变量，然后追加它。

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

推荐阅读