Question

我有以下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>

无法更改代码结构的第一个代码段。我必须制作第一个代码段，如第二个代码段，并替换为第一个代码段。

请帮忙。

提前致谢..

Answer 1

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>

（demo）

动态制作ul-li导航

1 个答案: