How can I pass elements li from one list to another that works in both directions

Question

How can I pass elements li from one list to another that works in both directions

Navigation

#1 by (1 votes)

0

I have a list and I need to click on one of the li to pass that element to the other list, it must work both ways.

As I have consulted, I can do it with appendTo, but at this moment I am passing the complete list to the other list (it disappears completely) and that is not what I need to do.

----------
app.js
----------
// escribe tu código acá
$(document).ready(function(){   
   // aqui definimos el evento sobre los li 
   $('.todo').on('click', 'li', function(){
    // Mover elemento li de todo a done     
       $('.todo').appendTo('.done');
   });
}); 


----------
index.html
----------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tareas terminadas</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <div class="list">
      <h3>Por hacer:</h3>
      <ul class="todo">
        <li>Sacar la ropa</li>
        <li>Lavar los platos</li>
        <li>Hacer la cama</li>
        <li>Leer un rato</li>
        <li>Terminar este reto</li>
        <li>Sacar al perro</li>
      </ul>
    </div>

    <div class="list">
      <h3>Hecho:</h3>
      <ul class="done">
      </ul>
    </div>
  </div>
   <!-- incluye acá jQuery y crea la referencia a app.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>


----------
style.css
----------
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.list {
  display: inline-block;
  width: 330px;
  vertical-align: top;
  margin: 0 50px;
}

ul {
  font-size: 18px;
  background-color: #f5f5f2;
  padding: 0;
  min-height: 50px;
  border: 1px solid #DBDBD3;
}

ul li {
  color: #66665D;
  list-style-type: none;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #DBDBD3;
}

ul li:last-child {
  border-bottom: none;
}

ul.done li {
  color: #ABABA4;
  text-decoration: line-through;
}

jquery html5 css3

asked by García Henry 28.10.2017 в 04:53

source

1 answer

setInterval () with variable times Problem with css

score 1 · Accepted Answer

You were really very close to achieving it, you only had to change the selector with which you were moving the item to the other list.

I leave the code working:

$(document).ready(function(){   
    $('.todo').on('click', 'li', function(){    
       $(this).appendTo('.done');
    });

    $('.done').on('click', 'li', function(){    
       $(this).appendTo('.todo');
    });
});

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.list {
  display: inline-block;
  width: 330px;
  vertical-align: top;
  margin: 0 50px;
}

ul {
  font-size: 18px;
  background-color: #f5f5f2;
  padding: 0;
  min-height: 50px;
  border: 1px solid #DBDBD3;
}

ul li {
  color: #66665D;
  list-style-type: none;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #DBDBD3;
}

ul li:last-child {
  border-bottom: none;
}

ul.done li {
  color: #ABABA4;
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="list">
  <h3>Por hacer:</h3>
  <ul class="todo">
    <li>Sacar la ropa</li>
    <li>Lavar los platos</li>
    <li>Hacer la cama</li>
    <li>Leer un rato</li>
    <li>Terminar este reto</li>
    <li>Sacar al perro</li>
  </ul>
</div>

<div class="list">
  <h3>Hecho:</h3>
  <ul class="done">
  </ul>
</div>
</div>

By changing $(".todo").appendTo('.done'); by $(this).appendTo('.done'); you are referencing the <li> that you just clicked on, thus preventing the entire <ul> from being added to the second list.