围绕动态 html 列表内容添加 Div答案

【问题标题】：Add Div around dynamic html list content围绕动态 html 列表内容添加 Div
【发布时间】：2012-02-27 16:41:30
【问题描述】：

例如我有这样的结构：

<Ul>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

这里的内容是动态的，我需要在 heading 周围添加包装器 div 并跟随内容，像这样

<div class="wrap">
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</div>

【问题讨论】：

标签： javascript html css dynamic-content

【解决方案1】：

不要使用 DIV 来环绕您的 LI，请考虑为每个要显示为标题的 LI 添加一个类。

<style>
.heading
{
 font-weight:bold;
}
</style>

<Ul>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

【讨论】：

【解决方案2】：

您所做的是不正确的标记 ul 标签只能包含 li 标签作为直接子代

<Ul>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

甚至

<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

编辑：

将其包装在容器中

<div class="wrap">
<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>
</div>

【讨论】：

我同意你的观点，无论这里给出的示例是完全动态的......我真的很感激......谢谢
准确发布您想要做的事情。仅仅标记是不够的
如你所说，我已更改如下内容：
- 标题
- 动态内容
- 动态内容
- 动态内容
- 标题
现在我想像上面说的那样包装一个容器

【解决方案3】：

使嵌套列表更具语义

<Ul class="wrap">
  <li>heading
    <Ul>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
    </Ul>
  </li>
</Ul>

【讨论】：