1

tengo un código con jquery que genero dos listas y puedo seleccionar items de una a otra mediante drag and drop.

El resultado que produce es este

introducir la descripción de la imagen aquí

El código html resultante es este

 
    <ol class="ui-sortable">
        <li data-id="1" class="ui-draggable ui-draggable-handle newClass"><div data-id="1" style="min-height: 100px;min-width: 100px">
            <div style="float:left" class="titleField">Campo de Texto<br>
            <input type="text" placeholder="Titulo..."><br> <input type="text" placeholder="Descripcion..."><br></div>
            <div style="float:right" class="btnDeleteItem">
                <button class="btn btn-warning" id="1" data-btnid="1" btnid="1" data-id="1">Eliminar</button></div>
            </div>
        </li>
        
        <li data-id="2" class="ui-draggable ui-draggable-handle newClass">
            <div data-id="2" style="min-height: 50px;min-width: 100px"><div style="float:left" class="titleField">Campo de Foto</div>
            <div style="float:right" class="btnDeleteItem">
                <button class="btn btn-warning" id="2" data-btnid="2" btnid="2" data-id="2">Eliminar</button></div>
            </div>
        </li>
    </ol>

Ahora mi intención mediante el botón de guardar es recorrer toda esta lista "ol", obtener los items "li" y de cada uno de ellos sus propiedades

Para ello estoy intentando hacer como esto con jQuery sin éxito

    $(document).on('click', '#btnSaveForm', function(event) {
        $('.newClass').each(function(i, items_list){
            console.log(items_list);
        });
    });

Este trozo de código de jquery me da un console.log de todo el elemento "li", después no se como coger los atributos que marco en la captura, ja que del elemento "li" la clase me marca el tipo de objeto "campo de texto...foto", y luego dentro de ese elemento tiene unos input que quiero obtener los valores.

introducir la descripción de la imagen aquí

Gracias,

2
  • En lo referente a recorrer los elementos "li", el problema está en el método find que utilizas. En tu código ya estás recorriendo los elementos li mediante el bucle each, y luego utilizas el método find, pero este método sirve para encontrar elementos hijos del elemento en cuestión (el cual ya es el elemento li) y por eso no te lo encuentra. Digamos que los encontraria si dentro de los li tuvieses anidados más elementos li. Dentro del primer each, con $(this) ya tienes el li que estás recorriendo, y a partir de ahí $(this).find('input') te seleccionará los inputs, etc...
    – cooper
    el 12 sep. 2020 a las 8:00
  • Gracias @cooper , he visto lo que me dices...1000 gracias. He aprovechado para editar el post principal y poner los progresos que he hecho.
    – ilernet
    el 12 sep. 2020 a las 8:41

1 respuesta 1

2

El ejemplo que te pongo está hecho para la primera parte (el primer elemento li). Lo he hecho añadiendo clases a los elementos input que hay en la primera lista (clases title e input-value). Simplemente les he añadido esas clases y luego dentro del bucle (para cada li), voy buscando dichas clases y recojo sus valores. Lo he hecho también para el atributo data-id del button que pones al final, pero puedes hacerlo con cualquier otro atributo de dicho botón (id, data-btnid, btnid).

En la segunda lista los elementos cambian, lo que implica que también tendrás que hacer una programación a medida. Tendrás que tener en cuenta que en esa segunda lista no tienes los mismos elementos de la primera, razón por la cual si ejecutas este ejemplo que te pongo, devuelve "undefined", ya que va a buscarlos pero no los encuentra.

Una solución a esto puede ser agregar clases a las distintas listas y buscar/filtrar por esas clases. Luego, para cada clase buscas los elementos que haya en dicha clase.

$(document).on('click', '#btnSaveForm', function(event) {
    var title, input_value, data_id;
    $('.newClass').each(function(i, items_list){
        title = $(this).find('.title').val();
        input_value = $(this).find('.input-value').val();
        data_id = $(this).find('.btn-warning').attr('data-id');

  console.log('Valores recogidos:');
  console.log('titulo: '+title+', valor: '+input_value+', data_id: '+data_id);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="ui-sortable">
  <li data-id="1" class="ui-draggable ui-draggable-handle newClass">
    <div data-id="1" style="min-height: 100px;min-width: 100px">
      <div style="float:left" class="titleField">Campo de Texto<br>
        <input type="text" placeholder="Titulo..." value="título de ejemplo 1" class="title"><br>       
        <input type="text" placeholder="Descripcion..." value="valor de ejemplo 1" class="input-value"><br>
      </div>
      <div style="float:right" class="btnDeleteItem">
        <button class="btn btn-warning" id="1" data-btnid="1" btnid="1" data-id="1">Eliminar</button>
      </div>
    </div>
  </li>
        
        <li data-id="2" class="ui-draggable ui-draggable-handle newClass">
            <div data-id="2" style="min-height: 50px;min-width: 100px"><div style="float:left" class="titleField">Campo de Foto</div>
            <div style="float:right" class="btnDeleteItem">
                <button class="btn btn-warning" id="2" data-btnid="2" btnid="2" data-id="2">Eliminar</button></div>
            </div>
        </li>
    </ol>

<input type="button" id="btnSaveForm" value="Guardar">

1
  • Muchas gracias @cooper lo he adaptado y funciona a la perfección. 1000 gracias
    – ilernet
    el 12 sep. 2020 a las 9:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.