Me gustaría devolver una lista de elementos numéricos después de hacer clic en "¡Haz clic en mí!" solo con jQuery .
Por ejemplo, los siguientes valores:
55.5 456.5 .54 32.2Debiera ser:
.54 32.2 55.5 456.5Código:
$(function() { $('.btn').on('click', function() { $('input').keyup(function() { var start = $(this).index('input'); var target = $(this).val() - 1; if (target < start) $(this).parent().insertBefore($('li').eq($(this).val() - 1)); if (target > start) $(this).parent().insertAfter($('li').eq($(this).val() - 1)); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="ItemList"> <li>some number 1 <input id="Text1" type="number" value="32.2" /> </li> <li>some number 2 <input id="Text2" type="number" value="456.5" /> </li> <li>some number 3 <input id="Text3" type="number" value="55.5" /> </li> <li>some number 4 <input id="Text4" type="number" value=".54" /> </li> </ul> <button class='btn'> Click me! </button>Pero, no trabajo. Logré hacerlo funcionar, pero la función solo reconoce el primer dígito. Los demás los ignora.
Si desea reordenar la lista utilizando el valor de entrada dentro de "li", puede intentarlo así: (consulte el violín: https://jsfiddle.net/v1oskqg0/ )
$(".btn").on("click", function() { $("#ItemList li").each(function(index) { var input_value = $(this).find('input').val(); $(this).data('order', input_value); }) $("#ItemList li") .sort((a,b) => $(a).data("order") - $(b).data("order")) .appendTo("#ItemList"); });Primero, almacené el valor del campo de entrada en un atributo de datos en el elemento li y luego clasifiqué los elementos al hacer clic en btn.