<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>
¿Es posible cambiar este divs con jQuery? Me gustaría recibir:orden de cambio divs con jQuery
<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>
puedo usar solamente jQuery
VIVO: http://jsfiddle.net/cmVyM/
que hará que este único - si el documento está listo.
Parece que quieres mover el primer div después del último.
$.fn.insertAfter inserta los elementos coincidentes después del parámetro:
$(".test.one").insertAfter(".test.three");
Editar: Si desea una solución más general de la adición de la primera a la última, sin recurrir a las clases explícitas:
var tests = $('.test');
tests.first().insertAfter(tests.last());
Esto no funciona cuando hay un grupo de divs con el mismo nombre de clase. Di 3 divs con 'test-one', 3 con' test-two' y otros 3 con 'test-three'. ¿Alguna sugerencia para tal caso? –
@VineetKaushik ¿Qué desea que suceda, para que se inserte el 'test-one' después de' test-three', o uno específico? Si el primero que ya ocurre, si este último elige selectores más específicos. – Zirak
Just do $('.one').insertAfter('.three');
Sólo tiene que utilizar InsertAfter como la respuesta anterior dicho
var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');
tweede.insertAfter(derde);
eerste.insertAfter(tweede);
$("#botao").click(function(){
$("#a3").insertBefore("#a1");
});
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div>
<a id="botao">altera</a>
</div>
En caso de que se encuentre esta respuesta más adelante, ¿puede agregar algunos comentarios básicos sobre cómo funciona esto? Gracias. – Shawn
usted puede hacerlo por esta
var obj = $('.test.two');
obj.after(obj.prev());
así, div uno y div dos cambiará su posición.
Espero que pueda ayudarlo.
Aquí hay un ejemplo simple con botones de navegación.
HTML
<ul>
<li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>
Javascript con jQuery
$('.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())
})
Inténtelo aquí: https://jsfiddle.net/nguyenvuloc/vd105gst
es un buen ejemplo. pero ¿y si quiero guardar el pedido actualizado? – TarangP
Si desea cambiar el orden de grupo de divs con el mismo nombre de clase (por ejemplo, dado a continuación):
<div class="wrapper">
<span class="text">First Heading</span>
<span class="number">1</span>
</div>
<div class="wrapper">
<span class="text">Second Heading</span>
<span class="number">2</span>
</div>
<div class="wrapper">
<span class="text">Third Heading</span>
<span class="number">3</span>
</div>
Puede cambiar el orden por el siguiente código de jQuery:
$('.wrapper .number').each(function() {
$(this).insertBefore($(this).prev('.text'));
});
Suena como un trabajo para jQuery UI puede ordenar. –
Un par de ejemplos de ordenación de divs en esta respuesta anterior mía: http://stackoverflow.com/questions/7623819/looking-for-a-javascript-solution-to-reorder-divs/7623918#comment9258056_7623918. – jfriend00
Igual que esta pregunta: http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom – dan360