Me quedé atascado al agregar el elemento li después de eliminarlo de la lista ul. Probé append() y appendTo() en varios métodos pero aún nada.
https://jsfiddle.net/kq1yyoLk/ La idea básica es que hacer clic en el elemento 2,3,4,5,6 le mostrará el elemento-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>Esto funcionará incluso si cambia la identificación de las listas.
$(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>En primer lugar, tenga en cuenta que a su HTML le faltaba el primer </li> y $('list-1') le faltaba el # para el selector de Id.
Para hacer lo que necesita, no es necesario agregar/separar nada del DOM. Simplemente puede llamar a show() en #list-1 cuando se hace clic en cualquiera de los li , así:
$('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>Tantos problemas.
Aquí hay algo de JavaScript que funciona;
$(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> Tiene un error en su HTML donde no ha cerrado su primer elemento <li> .
En var temp = $('list-1').detach(); está tratando de hacer referencia al elemento por su ID, pero no está usando un hash para hacerlo.
Además, los estilos que está utilizando significan que solo verá el elemento moverse a través de Inspeccionar elemento, ya que aún no se muestra ninguno después de moverse.
También intenta agregar el elemento temp en un elemento dentro de una ul con la identificación del list-item , cuando en realidad es su ul la que tiene esta identificación.
Estos no son problemas difíciles de detectar si pasa un poco de tiempo realmente mirando su código.