Question

我有以下CSS组成目录树。我希望能够将具有<li>个孩子N标签的<ul>个标签动态地附加到现有的dirTree中。不管我尝试什么，我最终都会附加原始文本，否则样式将无法正确应用。

我不是CSS专家，但是我正在使用开发工具进行检查，看到了:before和:after，但不确定如何使用jquery附加它。

以下代码应能够在静态文件中运行而不会出现问题。谢谢。

$("#dirTree").append("<li>Parent Directory</li><ul>child1</ul><ul>child2</ul>");

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: monospace;
}
ul li {
  font-size: 13px;
  position: relative;
}
ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
ul li.root {
  margin: 0px 0px 0px -20px;
}
ul li.root:before {
  display: none;
}
ul li.root:after {
  display: none;
}
ul li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
  <div class="dir">
    <ul id="dirTree">
      <li class="root">
        File Explorer
      </li>
      <li>
        Want to create a new directory? Click here
        <ul>
          <li>Click here to upload a file</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

«...似乎删除了分支样式...»

您在标记中缺少<li>。 “分支样式”与此相关。

此外，<ul>中但没有<li>的某些文本是无效标记。

$("#dirTree").append("<li>Parent Directory</li><ul><li>child1</li></ul><ul><li>child2</li></ul>");

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: monospace;
}
ul li {
  font-size: 13px;
  position: relative;
}
ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
ul li.root {
  margin: 0px 0px 0px -20px;
}
ul li.root:before {
  display: none;
}
ul li.root:after {
  display: none;
}
ul li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
  <div class="dir">
    <ul id="dirTree">
      <li class="root">
        File Explorer
      </li>
      <li>
        Want to create a new directory? Click here
        <ul>
          <li>Click here to upload a file</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 2

您的ul>li结构在jQuery中似乎完全错误。您已经为li标签编写了CSS，并将ul标签附加为子元素。那就是造成问题的地方。在我的回答中，我添加了一个ul，并且在ul内有多个li作为您的动态子代。

为获得清晰的定义我将您的jQuery分为多行，这将更易于阅读和理解

$("#dirTree").append("<li>Parent Directory</li>");
$("#dirTree").append("<ul id='parent'></ul>");
$("#parent").append("<li>child1</li>");
$("#parent").append("<li>child2</li>");
$("#parent").append("<li>child3</li>");
$("#parent").append("<li>child4</li>");

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: monospace;
}

ul li {
  font-size: 13px;
  position: relative;
}

ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}

ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}

ul li.root {
  margin: 0px 0px 0px -20px;
}

ul li.root:before {
  display: none;
}

ul li.root:after {
  display: none;
}

ul li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
  <div class="dir">
    <ul id="dirTree">
      <li class="root">
        File Explorer
      </li>
      <li>
        Want to create a new directory? Click here
        <ul>
          <li>Click here to upload a file</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

无法使用Jquery将HTML附加到列表

2 个答案: