Question

我有li个列表项。当我单击任何一个li项目时，它应该被附加或显示在一个div标签上，而在山姆时间剩余的列表项目应该使用jQuery附加在其他div标签中。

$(document).on('click', '.main-menu li', function() {
  $('.sidenav').append($('.topnav')[0].innerHTML);
  $('.topnav').empty();
  $(this).remove()
});

<div class="topnav"></div>
<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
         List One
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#">
        <i class="fa fa-laptop fa-2x"></i>
        <span class="nav-text">
          List Two
        </span>
      </a>
    </li>
    <li class="has-list">
      <a href="#">
        <i class="fa fa-list fa-2x"></i>
        <span class="nav-text">
          List Three
        </span>
      </a>
    </li>
  </ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

希望我能正确理解您的期望。如前所述，如果要将li附加到div中，则需要在顶部附加一个父ul。

如建议的那样，这是一个代码段：

$('.main-menu li').on('click', function(_click) {
  var $selectedLi = $(_click.currentTarget);
  $('.topnav ul').append($selectedLi.clone());
  $selectedLi.remove();
  $('.sidenav ul').append($('.main-menu ul').clone());
  $('.main-menu ul').remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <ul></ul>
</div>
<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
         List One
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#">
        <i class="fa fa-laptop fa-2x"></i>
        <span class="nav-text">
          List Two
        </span>
      </a>
    </li>
    <li class="has-list">
      <a href="#">
        <i class="fa fa-list fa-2x"></i>
        <span class="nav-text">
          List Three
        </span>
      </a>
    </li>
  </ul>
</nav>
<div class="sidenav">
  <ul></ul>
</div>

Answer 2

实际上，您不能将li元素追加到div，而只能将它们追加到列表元素。

您需要做的是获取text元素中的li并将其附加到divs，然后使用$('.main-menu li').not($(this))获取其他{{1} }元素，其中li是单击的$(this)元素。

这应该是您的代码：

li

演示：

$(document).on('click', '.main-menu li', function() {
  $('.sidenav').text($(this).text());
  $('.topnav').empty();
  $('.main-menu li').not($(this)).each(function(i) {
    $('.topnav').append($('.main-menu li').not($(this))[i].textContent);
  });
});

$(document).on('click', '.main-menu li', function() {
  $('.sidenav').text($(this).text());
  $('.topnav').empty();
  $('.main-menu li').not($(this)).each(function(i) {
    $('.topnav').append($('.main-menu li').not($(this))[i].textContent);
  });
});

当单击列表中的li项时，如何使用jquery将单击的项附加到单独的div中，并将其余列表项附加到不同的div标签中

2 个答案: