Tengo una lista como esta:
<ul> <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="1"></input> </li> <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="2"></input> </li> <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="3"></input> </li> <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="4"></input> </li> </ul>Quiero cambiar las posiciones hacia arriba o hacia abajo.
lo hago con este codigo
$(function() { $('.up').on('click', function(e) { var wrapper = $(this).closest('li') wrapper.insertBefore(wrapper.prev()) }) $('.down').on('click', function(e) { var wrapper = $(this).closest('li') wrapper.insertAfter(wrapper.next()) }) })Pero, ¿cómo puedo cambiar el valor de las entradas (con el mismo nombre de clase) para cada clic hacia arriba o hacia abajo ? Nota: solo accedo al nombre de la clase para las entradas (no a la identificación ni al nombre de la entrada).
Prueba esto:
$(function () { $('.up').on('click', function (e) { var wrapper = $(this).closest('li') wrapper.insertBefore(wrapper.prev()) }) $('.down').on('click', function (e) { var wrapper = $(this).closest('li') wrapper.insertAfter(wrapper.next()) }) $('.down,.up').click(function(){ var inputs = $(this).parents('ul').find('.order'); $.each(inputs, function (i, input) { $(input).val(i + 1); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="1"></input> </li> <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="2"></input> </li> <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="3"></input> </li> <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="4"></input> </li> </ul>Utilice esta función para actualizar los valores:
function changevalue(){ var menus = document.getElementsByClassName("order"); for (var i = menus.length - 1; i >= 0; i--) { menus[i].value = i+1; } }Prueba esto:
$(function() { $('.up').on('click', function(e) { var wrapper = $(this).closest('li') wrapper.insertBefore(wrapper.prev()) changevalue(); }) $('.down').on('click', function(e) { var wrapper = $(this).closest('li') wrapper.insertAfter(wrapper.next()) changevalue(); }) }) function changevalue(){ var menus = document.getElementsByClassName("order"); for (var i = menus.length - 1; i >= 0; i--) { menus[i].value = i+1; } } ul li:first-child a.up, ul li:last-child a.down { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="1"/> </li> <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="2"/> </li> <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="3"/> </li> <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="4"/> </li> <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="5"/> </li> <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a> <input type="hidden" class="order" value="6"/> </li> </ul>