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

Question

在从ul列表中删除li元素后，我在添加li元素时卡住了。我在各种方法中尝试了append()和appendTo()，但仍然一无所获。

https://jsfiddle.net/kq1yyoLk/的基本思想是，单击2、3、4、5、6项将显示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>

​

Answer 2

首先请注意，您的HTML缺少了第一个</li>，而$('list-1')缺少了Id选择器的#。

要执行所需的操作，不需要从DOM中附加/分离任何内容。当单击任何li时，您可以简单地在#list-1上调用show()，如下所示：

​

$('li').on('click', function(e) {
  e.preventDefault();
  $('#list-1').show();
  var number = $(this).find('a').data('number');

  console.log(number); // I assume you're using this in your logic somewhere
});

#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>
    <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 3

太多问题了。

下面是一些有效的JavaScript；

​

 $(function() {
      $('li').on('click', function(e)
       {
          e.preventDefault();                      
          var number=$("a",this).data('number');
          
          var temp = $('#list-1').detach();
          $('ul#list-item').append(temp);
          
       });
});

<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>            
     <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>

​

您的HTML中有一个错误，您没有关闭第一个<li>元素。

在var temp = $('list-1').detach();中，您试图通过元素的ID来引用元素，但实际上并没有使用散列来这样做。

此外，您正在使用的样式意味着您只能通过Inspect元素看到元素移动，因为它在移动后仍然显示为none。

您还可以尝试将temp元素添加到id为list-item的ul内的元素中-而实际上是您的ul具有此ID。

如果您花一点时间真正查看您的代码，就不难发现这些问题。