Question

我有一个包含多个子菜单的<ul>元素，我想在父级内的<ul>元素中插入一个<li>元素，并增加父菜单的深度影响新元素的兄弟元素或对父元素进行任何其他更改。

到目前为止，这是我的HTML：

<ul id="main-menu">
  <li><a href="/home">Home</a></li>
  <li>
    <a href="/lorem">lorem</a>
    <ul class="sub-menu">
      <li><a href="/ipsum">ipsum</a></li>
      <li><a href="/1"><i class="icon-credit-card"></i> Pricing Tables</a></li>
      <li><a href="/2"><i class="icon-gift"></i> Icons</a></li>
    </ul>
  </li>
  <li><a href="/grid">Grid</a></li>
  <li><a href="/slick">Slick</a></li>
  <li><a href="/slick_in_grid">Slick in Grid</a></li>
  <li><a href="/video">Videotest</a></li>
  <li><a href="/videogrid">Video in Grid</a></li>
  <li><a href="/audiogrid">Audio in Grid</a></li>
  <!--- here the new li ul  -->
  <li><a href="/formgrid">Form in Grid</a></li>
  <li>
    <a href="/langsub">langsub</a>
    <ul class="sub-menu">
    <li><a href="/emt"><i class="icon-wrench"></i>EinganzlangerMenutext</a></li>
    <li><a href="/11"><i class="icon-credit-card"></i> Pricing Tables</a></li>
    <li><a href="/12"><i class="icon-gift"></i> Icons</a></li>
    <li><a href="/13"><i class="icon-file-alt"></i> Pages</a></li>
    </ul>
  </li>
  <li>
    <a href="/blog">Blog</a>
    <ul class="sub-menu">
      <li><a href="/21">Large Image</a></li>
      <li><a href="/22">Medium Image</a></li>
      <li><a href="/23">Masonry</a></li>
      <li><a href="/24">Double Sidebar</a></li>
      <li><a href="/25">Single Post</a></li>
    </ul>
  </li>
  <li><a href="/contact">Contact</a></li>
<!--- here the new /ul  /li -->
</ul>

这是我的JavaScript（jQuery）：

$("#main-menu").each(function() {
  //check region to move 
  var left = 0;
  var child = 0;
  var last_child = 0;
  var overflow = false;
  $("#main-menu > li").each(function() {
    if ($(this).offset().left > left) {
      left = $(this).offset().left;
      child = $(this).index();
      alert($(this).attr("class") + $(this).html() + $(this).offset().left);
    } else {
      overflow = true;
    }
    last_child = $(this).index();
  });
  // insert li / ul and its closing at the end  
  if (overflow) {
    $("#main-menu > li").each(function() {
      if ($(this).index() == child) {
        $(this).before("<li><a href=\"#\">weitere...</a><ul class=\"sub-menu\">");
      }
      if ($(this).index() == last_child) {
        $(this).after("</ul></li>");
      }
    });
  }
});

这是我正在寻找的结果的一个例子：

<ul class="before_change">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>            
</ul>
<ul class="after_change">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>
    new
    <ul>
      <li>four</li>
      <li>fife</li>            
    </ul>
  </li>
</ul>

Answer 1

我只需要删除并替换元素，而不是尝试更改原始HTML 这是完成的JS代码：

$("#main-menu").each(function() {
  //check region to move and clone it
  var left = 0;
  var child = 0;
  var last_child = 0;
  var overflow = false;
  var objects = Array();
  $("#main-menu > li").each(function() {
    if ($(this).offset().left > left) {
      left = $(this).offset().left;
      child = $(this).index();
    } else {
      overflow = true;
    }
    // clone
    objects[$(this).index()] = $(this);
    last_child = $(this).index();
  });
  if (overflow) {
    $("#main-menu > li").each(function() {
      clone = ''
      for (o = child; o <= last_child; o++) {
        clone += '<li>' + objects[o].html() + '</li>';
      }
      if ($(this).index() == child) {
        $(this).replaceWith("<li><a href=\"#\">weitere...</a><ul class=\"sub-menu\"><li>" + clone + "</li></ul></li>");
      }
      if ($(this).index() > child) {
        $(this).remove();
      }
    });
  }
});

如何在不更改父“ul”或影响其子项的情况下将子菜单插入“ul”元素？

1 个答案: