javascript - 如何将分离的 li 元素添加到 ul 列表

Question

从 ul 列表中删除 li 元素后，我一直坚持添加它。 我在各种方法中尝试了 append() 和 appendTo() 但仍然没有。

https://jsfiddle.net/kq1yyoLk/ 基本思想是点击 2,3,4,5,6 item 它会显示 item-1

$(function() {
  $('li').on('click', function(e) {
    e.preventDefault();
    var number = $("a", this).data('number');

    var temp = $('list-1').detach();
    $('ul #list-item').append(temp);
  });
});

#list-1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="features-content">
  <ul id="list-item" class="fa-ul features-list">
    <li id="list-1"><a href="#" data-number="1">1</a>
    <li id="list-2"><a href="#" data-number="2">2</a></li>
    <li id="list-3"><a href="#" data-number="3">3</a></li>
    <li id="list-4"><a href="#" data-number="4">4</a></li>
    <li id="list-5"><a href="#" data-number="5">5</a></li>
    <li id="list-6"><a href="#" data-number="6">6</a></li>
    <li id="list-7"><a href="#" data-number="7">7</a></li>
  </ul>
</div>

Answer 1

即使您更改列表 id，这也会起作用。

$(function() {
  $('li').on('click', function(e) {
    e.preventDefault();
     $('#list-item li:first-child').show();
  });
});

#list-1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="features-content">
  <ul id="list-item" class="fa-ul features-list">
    <li id="list-1"><a href="#" data-number="1">1</a>
    <li id="list-2"><a href="#" data-number="2">2</a></li>
    <li id="list-3"><a href="#" data-number="3">3</a></li>
    <li id="list-4"><a href="#" data-number="4">4</a></li>
    <li id="list-5"><a href="#" data-number="5">5</a></li>
    <li id="list-6"><a href="#" data-number="6">6</a></li>
    <li id="list-7"><a href="#" data-number="7">7</a></li>
  </ul>
</div>