动态创建ul-li导航

Make ul-li navigation dynamically

本文关键字：导航 ul-li 创建 动态      更新时间：2023-09-26

我有以下html:

<div id="nav">
    <ul>
      <li class="keyitem">keyitem 1</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li class="keyitem">keyitem 2</li>
      <li>item</li>
      <li>item</li>
      <li class="keyitem"></li>
      <li>item</li>
      <li>item</li>
    </ul>
</div>

但是我想让上面的内容像下面这样:

<div id="nav">
    <ul>
      <li class="keyitem">one
        <ul>
          <li class="child_one">item</li>
          <li class="child_one">item</li>
          <li class="child_one">item</li>
        </ul>
      </li>
      <li class="keyitem">two
        <ul>
          <li class="child_two">item</li>
          <li class="child_two">item</li>
        </ul>
      </li>
      <li class="keyitem">three
        <ul>
          <li class="child_three">item</li>
          <li class="child_three">item</li>
        </ul>
      </li>
    </ul>
</div>

不能改变代码结构的第一个片段。我必须使第一个片段像第二个片段，并替换为第一个。

请帮助。

Thanks in advance. 

var childClasses = ['child_one', 'child_two', 'child_three' /* more here */];
$('#nav li.keyitem').each(function(i) {
    var $li = $(this),
        $sub = $li.nextUntil('li.keyitem').addClass(childClasses[i]);
    $('<ul />').appendTo($li).append($sub);
});

会产生:

<div id="nav">
    <ul>
      <li class="keyitem">keyitem 1
        <ul>
          <li class="child_one">item</li>
          <li class="child_one">item</li>
          <li class="child_one">item</li>
        </ul>
      </li>
      <li class="keyitem">keyitem 2
        <ul>
          <li class="child_two">item</li>
          <li class="child_two">item</li>
        </ul>
      </li>
      <li class="keyitem">keyitem 3
        <ul>
          <li class="child_three">item</li>
          <li class="child_three">item</li>
        </ul>
      </li>
    </ul>
</div>
(演示)

相关文章：