在动态 html 列表内容周围添加 Div

发布于 2025-01-02 23:34:01 字数 588 浏览 0 评论 0原文

例如，我有这样的结构：

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

原文

for example I have structure like this:

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

here content is dynamic where i need to add wrapper div around heading and followed content, something like this

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你曾走过我的故事 2025-01-09 23:34:01

不要使用 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>

Instead of using a DIV to wrap around your LIs consider adding a class to each LI that you want to appear as a heading.

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

回复收藏 0 原文

撩发小公举 2025-01-09 23:34:01

您正在做的事情是不正确的标记
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>

What you are doing is incorrect markup
ul tags can only contain li tags as direct children

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

or even

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

Edit:

To wrap this inside a container

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

回复收藏 0 原文

拥有 2025-01-09 23:34:01

使其更具语义嵌套列表

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

Make it more semantic nested lists

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

回复收藏 0 原文

~没有更多了~