jQuery-在以编程方式创建的父元素内创建多个DOM元素 [英] Jquery - Create multiple DOM elements inside a programmatically created parent element

问题描述

我正在用jquery创建一个数据驱动列表.我不知道如何使用jQuery的创建HTML元素的方法将多个子元素添加到父元素.我在这里想念什么?

I'm creating a data-driven list with jquery. I can't figure out how to add multiple children to a parent element using jQuery's method for creating HTML elements. What am I missing here?

我已经重新组织了内部的<a>元素，因此它们都可以成为呈现的<td>内部的新元素.取而代之的是，每个"html"键都会覆盖前一个键，并且仅呈现最后一个"html"键和值.在这种情况下，"a#deleteModal"元素是唯一呈现的元素.

I've re-organized the <a> elements inside the so they all can be a new element inside the rendered <td>. Instead it every "html" key overwrites the previous key and only the last "html" key and value are rendered. In this case the "a#deleteModal" element is the only one rendered.

这是我需要打印的内容:

This is what I need it to print:

<ul class="list-10" style="">
    <li data-info="line91" name="documentationmenunull">
        <table width="100%">
            <tbody>
                <tr>
                    <td>
                        <a href="#" data-toggle="dropdownArrow" data-target="documentationmenu1"><i class="fa fa-minus-square-o"></i></a> 
                        <a href="#" class="editItem" data-target="documentation_1" data-type="Documentation" id="adocumentationmenu1">Main</a> 
                        <a href="#deleteModal"><span class="fa fa-trash-o deleteMenuItem" rel="tooltip" title="" data-original-title="Delete"></span></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </li>
</ul>

这就是我要实现的目标:

This is how I'm trying to accomplish that:

function getList(item, $list) {
  if (item) {
    if (item.title) {
      $list.append($("<li/>", {
        "name": "documentationMenu",
        "html": $("<table/>", {
          "width": "100%",
          "html": $("<tbody/>", {
            "html": $("<tr/>", {
              "html": $("<td/>", {
                "html": $("<a/>", {
                  "href": '#',
                  "data-toggle": "dropdownArrow",
                  "data-target": "documentationMenu" + item.id,
                  "html": $("<i/>", {
                    "class": "fa fa-minus-square-o"
                  }),
                }),
                "html": $("<a/>", {
                  "href": '#',
                  "data-toggle": "dropdownArrow",
                  "data-target": "documentation_" + item.id,
                  "data-type": "documentation",
                  "id": "aDocumentationMenu" + item.id,
                  "html": item.title
                }),
                "html": $("<a/>", {
                  "href": '#deleteModal',
                  "html": $("<span/>", {
                    "class": "fa fa-trash-o deleteMenuItem",
                    "data-toggle": "tooltip",
                    "title": "Delete"
                  })
                })
              })
            })
          })
        })
      }));
    }
    if (item.children) {
      var $sublist = $("<ul/>");
      $.each(item.children, function(key, value) {
        getList(value, $sublist);
      });
      $list.append($sublist);
    }
  }
}

基本上，您可以忽略item.children的最后一个if块.我只需要弄清楚如何在<td>内放置几个锚标记.有什么想法吗?

Essentially you can ignore the last if block for item.children. I just need to figure out how to place several anchor tags inside the <td>. Any ideas?

推荐答案

最后，@ Taplar提出了适当解决方案的建议.我希望找到一个与我最初共享的代码一起使用的解决方案，该文档可以在这里找到: https ://api.jquery.com/jQuery/#jQuery2 . 不幸的是，它似乎是一种代码样式，没有引起正确的注意，或者没有被广泛使用.这是我使用模板文字的简要介绍.

In the end @Taplar had the suggestion for the appropriate solution. I had hoped to find a solution that worked with the code I shared originally which documentation can be found here: https://api.jquery.com/jQuery/#jQuery2. Unfortunately it appears to be a code style that hasn't drawn the right person's attention or it's not widely liked. Here's a quick rundown of what I went with using a template literal.

<div id="documentationMenuList"></div>

<script>
function buildMenu(menu_items, name){
    var $ul = $('<ul class="list-10"></ul>');

    $.each(menu_items, function (key, value) {
        createCollapsableList(value, $ul, name);
    });

    $ul.appendTo("#"+name+"MenuList");
}

function createCollapsableList(item, $collapsableList, name) {
    if (item) {     
        if (item.title) {
            $collapsableList.append(
            `<li name="${name}Menu${item.parent_id ? item.parent_id : 0}">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <a href="#" data-toggle="dropdownArrow" data-target="${name}Menu${item.id}"><i class="fa fa-minus-square-o"></i></a> 
                                <a href="#" class="editItem" data-target="${name}_${item.id}" data-type="${name}" id="${name}Menu${item.id}">${item.title}</a> 
                                <a href="#deleteModal"><span class="fa fa-trash-o deleteMenuItem" data-toggle="tooltip" title="Delete"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </li>`);
        }
        if (item.children) {
            var $sublist = $('<ul class="list-10"></ul>');
            $.each(item.children, function (key, value) {
                createCollapsableList(value, $sublist);
            });
            $collapsableList.append($sublist);
        }
    }
}
$(function(){
    buildMenu(menu_items, 'documentation');
});
</script>

这篇关于jQuery-在以编程方式创建的父元素内创建多个DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！