Скрывать и отображать различные дочерние элементы на основе щелчка

Question

Итак, я пытаюсь «перемещать» элементы между полями, я спрятал набор LI в элементе div и оставил идеальную копию скрытых элементов в другом видимом элементе div, идея состоит в том, что как только вы нажимаете видимый или скрытый становится видимым, а выбранный элемент скрывается, создавая иллюзию перемещения самого элемента. Мне удалось заставить работать первый цикл, но я хочу бесконечно перемещать эти элементы взад и вперед и застрял в процессе.

Могут быть лучшие способы делать то, что я пытаюсь сделать, но Это был единственный способ заставить его работать, предложения приветствуются.

Я также не нашел jquery расширения, которое делает это, если есть такое, мне бы хотелось, чтобы меня к нему направили.

$(document).ready(function() {

		
  $('.container li').click(function() {
  	var id = $(this).attr('id');
    var text = $(this).text();
    
    $('.box' + id + ' ' + '.' +text).show("fast");
    $(this).hide();
  });
  
 $('.group li').click(function() {
   	var id = $(this).attr('id');
    var text = $(this).text();
 	
  	$('.container ' + '#' + id + ' '  + '.' + text).show();
    $(this).hide();
 
 });
  
});

body {

  background:#666;

}

.box1, .box2, .box3 {
  display:inline-block;
  margin:1%;
  width:30%;
  background:rgba(255,255,255, .5);
  text-align:center;
  color:white;
}

.box1 h1, .box2 h1, .box3 h1 {
  margin:0;
}

.box1 hr, .box2 hr, .box3 hr {
  width:80%;
}

.container {
  width:95%;
  background:rgba(255,255,255, .5);
  margin-left:1%;
  margin-top:3%;
  padding:1%;
}

.container li, .box1 li, .box2 li, .box3 li {
  list-style-type:none;
  padding:1%;
  background:rgba(0,0,0,.2);
  width:20%;
  display:inline-block;
  border:1px solid rgba(0,0,0,.5);
  margin-bottom:2%;
}

.container li:hover, .container li:focus {
  border-color:red;
  color:white;
  cursor:pointer;
}

.group li {
  width:80%;
  margin-left:8%;
  cursor:pointer;
}

.box1 li, .box2 li, .box3 li {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group box1">
  <h1>box1</h1>
  <hr>
  <li class="Item1" id="1">Item1</li>
  <li class="Item2" id="1">Item2</li>
  <li class="Item3" id="1">Item3</li>
</div>


<div class="group box2">
  <h1>box 2</h1>
  <hr>
  <li class="Item1" id="2">Item1</li>
  <li class="Item2" id="2">Item2</li>
  <li class="Item3" id="2">Item3</li>
</div>

<div class="group box3">
  <h1>box3</h1>
  <hr>
  <li class="Item1" id="3">Item1</li>
  <li class="Item2" id="3">Item2</li>
  <li class="Item3" id="3">Item3</li>
</div>

<div class="container">
<li class="Item1" id="1">Item1</li>
<li class="Item2" id="1">Item2</li>
<li class="Item3" id="1">Item3</li>

<li class="Item1" id="2">Item1</li>
<li class="Item2" id="2">Item2</li>
<li class="item3" id="2">Item3</li>

<li class="Item1" id="3">Item1</li>
<li class="Item2" id="3">Item2</li>
<li class="Item3" id="3">Item3</li>
</div>

Answer 1

Во-первых, если вы собираетесь использовать li, вам нужно сохранить семантику, поместив тег ul в качестве его родительского.

Вместо этого я использовал div. Здесь вы можете использовать append(), чтобы переместить элемент из одного места в другое. В событии по щелчку добавление переместит элемент из исходного в целевой,

$(document).ready(function() {

  $('.container .item').click(function() {
    var box = $(this).attr('box');
    $(`.box${box}`).append($(this));
  });

  $('.box').on('click', '.item', function() {
    $(`.container`).append($(this));
  });

});

body {
  background: #666;
}

.group {
  display: flex;
  margin-bottom: 1em;
}

.group .box {
  border: 1px solid rgba(0, 0, 0, .5);
  flex-grow: 1;
  flex-basis: 0;
  padding: 1em;
}

.container {
  background: rgba(255, 255, 255, .5);
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

.container .item,
.group .item {
  padding: 2em;
  border: 1px solid rgba(0, 0, 0, .5);
  margin-bottom: 1em;
  margin-right: 1em;
}

.group .item {
  margin-right: 0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <div class="box box1">
    <h1>box1</h1>
    <hr>
  </div>
  <div class="box box2">
    <h1>box 2</h1>
    <hr>
  </div>

  <div class="box box3">
    <h1>box3</h1>
    <hr>
  </div>
</div>

<div class="container">
  <div class="item" box="1">Item1</div>
  <div class="item" box="1">Item1</div>
  <div class="item" box="1">Item1</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="3">Item3</div>
  <div class="item" box="3">Item3</div>
  <div class="item" box="3">Item3</div>
</div>