ulリストにdetached li要素を追加するには

Question

ulリストから削除した後にli要素を追加しようとしました。 私はvariusメソッドでappend()とappendTo()を試しましたが、まだ何もしていません。

https://jsfiddle.net/kq1yyoLk/ 基本的な考え方は、2,3,4,5,6の項目をクリックするそれはあなたがあなたの李を付加していない、あなたのアイテム-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

を示すことですあなたのul要素に子として

この

function function1() { 
     var ul = document.getElementById("list"); 
     var li = document.createElement("li"); 
     li.appendChild(document.createTextNode("Four")); 
     ul.appendChild(li); 
    } 

をお試しください

Answer 2

最初に、HTMLには最初の</li>がなく、$('list-1')にはIdセレクタの#がありません。

DOMから何かを追加/削除する必要はありません。

$('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

だから、多くの問題：liのいずれかが、このように、クリックされたとき、あなたは、単に#list-1にshow()を呼び出すことができます。

ここにいくつかの動作中の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>

あなたは、あなたの最初の<li>要素を閉じていませんでしたあなたのHTMLのエラーを持っています。

var temp = $('list-1').detach();では、IDで要素を参照しようとしていますが、実際にはハッシュを使用していません。

また、使用しているスタイルでは、移動後もまだ要素が表示されていないため、「要素の検査」で要素の移動しか表示されません。

また試してみて、list-itemのIDでul内の要素にtemp要素を追加する - 実際には、代わりにこのIDを持っているあなたのulだとき。

実際にコードを見て少し時間を過ごすと、これらの問題は発生しません。

Answer 4

これはリスト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>